/* Buttons */
    .btn-primary,.btn-secondary{
      display:inline-flex;align-items:center;justify-content:center;
      padding:15px 22px;border-radius:8px;font-size:15px;font-weight:700;
      text-decoration:none;transition:.2s ease;
    }
    .btn-primary{color:#fff;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 16px 34px rgba(37,99,235,.18)}
    .btn-secondary{background:rgba(255,255,255,.8);border:1px solid var(--line);color:var(--ink)}
    .btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px)}

/* Form */
    .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .field{display:grid;gap:8px}
    .field.full{grid-column:1 / -1}
    .field label{font-size:14px;font-weight:700;color:#243147}
    .input,.textarea,.select{
      width:100%;border-radius:16px;border:1px solid rgba(15,23,42,.08);
      background:rgba(255,255,255,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
      padding:15px 16px;font:inherit;color:var(--ink);outline:none;
      transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
    }
    .input:focus,.textarea:focus,.select:focus{
      border-color:rgba(37,99,235,.35);box-shadow:0 0 0 4px rgba(37,99,235,.10);transform:translateY(-1px);
    }
    .textarea{min-height:140px;resize:vertical}
    .checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .check{
      display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:16px;
      background:rgba(255,255,255,.78);border:1px solid rgba(15,23,42,.06);
      box-shadow:0 10px 24px rgba(15,23,42,.04);cursor:pointer;
    }
    .check input{margin-top:4px;accent-color:var(--blue)}
    .form-note{margin-top:18px;color:var(--muted);font-size:14px;line-height:1.7}

/* ═══════════════════════════════════════════════════
       HERO MODERNE
    ═══════════════════════════════════════════════════ */
    .hero-mandat {
      position: relative;
      padding: 100px 5% 80px;
      overflow: hidden;
      background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
    }
    .hero-mandat-bg {
      position: absolute; inset: 0; z-index: 0;
      pointer-events: none;
    }
    .hero-mandat-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: .5;
      animation: float-orb 18s ease-in-out infinite;
    }
    .hero-mandat-orb-1 {
      width: 420px; height: 420px;
      top: -100px; left: -80px;
      background: radial-gradient(circle, rgba(37,99,235,.4), transparent 70%);
    }
    .hero-mandat-orb-2 {
      width: 360px; height: 360px;
      bottom: -80px; right: -60px;
      background: radial-gradient(circle, rgba(6,182,212,.35), transparent 70%);
      animation-delay: -6s;
    }
    .hero-mandat-orb-3 {
      width: 280px; height: 280px;
      top: 30%; right: 20%;
      background: radial-gradient(circle, rgba(214,166,74,.25), transparent 70%);
      animation-delay: -12s;
    }
    @keyframes float-orb {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%      { transform: translate(40px, -30px) scale(1.08); }
      66%      { transform: translate(-30px, 40px) scale(.95); }
    }
    .hero-mandat-grid {
      position: absolute; inset: 0; z-index: 0;
      background-image:
        linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.04) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    }
    .hero-mandat-inner {
      position: relative; z-index: 1;
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 60px;
      align-items: center;
    }
    .hero-mandat-badge {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 9px 16px; border-radius: 999px;
      background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
      border: 1px solid rgba(37,99,235,.12);
      color: var(--blue);
      font-size: 12px; font-weight: 800;
      letter-spacing: .15em; text-transform: uppercase;
      margin-bottom: 28px;
      box-shadow: 0 6px 16px rgba(37,99,235,.08);
    }
    .hero-mandat-badge::before {
      content: ""; width: 8px; height: 8px; border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      box-shadow: 0 0 0 4px rgba(37,99,235,.18);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { box-shadow: 0 0 0 4px rgba(37,99,235,.18); }
      50%      { box-shadow: 0 0 0 8px rgba(37,99,235,.05); }
    }
    .hero-mandat-title {
      font-size: clamp(44px, 6vw, 76px);
      line-height: .98; letter-spacing: -.055em;
      font-weight: 900; color: var(--ink);
      margin: 0 0 24px;
    }
    .hero-mandat-title .accent {
      background: linear-gradient(135deg, var(--blue), var(--cyan), var(--gold));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-mandat-desc {
      font-size: 19px; line-height: 1.6;
      color: var(--muted); margin: 0 0 32px;
      max-width: 560px;
    }
    .hero-mandat-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
    .hero-cta-primary {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 15px 28px; border-radius: 999px;
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      color: #fff;
      font-size: 15px; font-weight: 700; text-decoration: none;
      box-shadow: 0 14px 34px rgba(37,99,235,.28);
      transition: transform .2s, box-shadow .2s;
    }
    .hero-cta-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 42px rgba(37,99,235,.34);
    }
    .hero-cta-primary::after { content: "→"; font-size: 16px; }
    .hero-cta-secondary {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 26px; border-radius: 999px;
      background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
      color: var(--ink);
      font-size: 15px; font-weight: 700; text-decoration: none;
      border: 1px solid rgba(15,23,42,.1);
      transition: background .2s, border-color .2s;
    }
    .hero-cta-secondary:hover {
      background: #fff; border-color: rgba(37,99,235,.3);
    }

    .hero-mandat-card {
      position: relative;
      background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
      border: 1px solid rgba(15,23,42,.08);
      border-radius: 24px; padding: 32px;
      box-shadow:
        0 30px 60px rgba(15,23,42,.12),
        0 0 0 1px rgba(37,99,235,.04);
    }
    .hero-mandat-card::before {
      content: ""; position: absolute;
      top: -2px; left: -2px; right: -2px; bottom: -2px;
      background: linear-gradient(135deg, rgba(37,99,235,.2), rgba(6,182,212,.15), rgba(214,166,74,.2));
      border-radius: 26px; z-index: -1; opacity: .6;
    }
    .hero-mandat-card h3 {
      font-size: 22px; font-weight: 800; margin: 0 0 6px;
      color: var(--ink); letter-spacing: -.02em;
    }
    .hero-mandat-card-sub {
      font-size: 14px; color: var(--muted); margin: 0 0 22px;
    }
    .hero-pillars {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .hero-pillar {
      padding: 16px;
      background: linear-gradient(145deg, #fafcff, #f1f6fc);
      border: 1px solid rgba(15,23,42,.06);
      border-radius: 16px;
      transition: transform .3s, box-shadow .3s;
    }
    .hero-pillar:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(15,23,42,.08);
    }
    .hero-pillar-num {
      display: inline-flex;
      width: 32px; height: 32px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      color: #fff; font-size: 13px; font-weight: 800;
      align-items: center; justify-content: center;
      margin-bottom: 10px;
    }
    .hero-pillar:nth-child(2) .hero-pillar-num { background: linear-gradient(135deg, #0891b2, #67e8f9); }
    .hero-pillar:nth-child(3) .hero-pillar-num { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
    .hero-pillar:nth-child(4) .hero-pillar-num { background: linear-gradient(135deg, #c0892f, #f3cd82); }
    .hero-pillar strong {
      display: block; font-size: 15px; font-weight: 800;
      color: var(--ink); margin-bottom: 4px;
    }
    .hero-pillar span {
      font-size: 12.5px; color: var(--muted); line-height: 1.4;
    }

    /* ═══════════════════════════════════════════════════
       SECTION CONSTAT
    ═══════════════════════════════════════════════════ */
    .section-constat {
      padding: 100px 5% 80px;
      position: relative; background: #fff;
    }
    .section-head-mandat {
      text-align: center; max-width: 820px;
      margin: 0 auto 56px;
    }
    .section-head-mandat .eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 8px 16px; border-radius: 999px;
      font-size: 11px; font-weight: 800;
      letter-spacing: .18em; text-transform: uppercase;
      color: var(--blue);
      background: rgba(37,99,235,.07);
      border: 1px solid rgba(37,99,235,.14);
      margin-bottom: 20px;
    }
    .section-title-mandat {
      font-size: clamp(32px, 4.5vw, 52px);
      line-height: 1.05; letter-spacing: -.04em;
      font-weight: 800; color: var(--ink);
      margin: 0 0 20px;
    }
    .section-title-mandat .accent {
      background: linear-gradient(135deg, var(--blue), var(--cyan), var(--gold));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .section-desc-mandat {
      font-size: 17px; line-height: 1.65;
      color: var(--muted); margin: 0;
    }
    .constat-duo {
      max-width: var(--max); margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
    }
    .constat-card {
      position: relative; padding: 40px;
      background: linear-gradient(165deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid rgba(15,23,42,.08);
      border-radius: 24px;
      box-shadow: 0 20px 50px rgba(15,23,42,.07);
      overflow: hidden;
      transition: transform .3s, box-shadow .3s;
    }
    .constat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 28px 60px rgba(15,23,42,.11);
    }
    .constat-card::before {
      content: ""; position: absolute;
      top: 0; left: 0; width: 6px; height: 100%;
      background: linear-gradient(180deg, var(--blue), var(--cyan));
    }
    .constat-card.b::before {
      background: linear-gradient(180deg, var(--gold), var(--blue));
    }
    .constat-card::after {
      content: ""; position: absolute;
      top: -60px; right: -60px;
      width: 180px; height: 180px; border-radius: 50%;
      background: radial-gradient(circle, rgba(37,99,235,.08), transparent 70%);
    }
    .constat-card.b::after {
      background: radial-gradient(circle, rgba(214,166,74,.08), transparent 70%);
    }
    .constat-kicker {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 800;
      letter-spacing: .2em; text-transform: uppercase;
      color: var(--blue); margin-bottom: 14px;
    }
    .constat-card.b .constat-kicker { color: var(--gold); }
    .constat-kicker::before {
      content: ""; width: 22px; height: 1.5px; background: currentColor;
    }
    .constat-card h3 {
      font-size: clamp(24px, 2.6vw, 32px);
      line-height: 1.15; letter-spacing: -.025em;
      font-weight: 800; color: var(--ink);
      margin: 0 0 14px;
      position: relative; z-index: 1;
    }
    .constat-card p {
      font-size: 15.5px; line-height: 1.7;
      color: var(--muted); margin: 0;
      position: relative; z-index: 1;
    }

    /* ═══════════════════════════════════════════════════
       SECTION USAGES
    ═══════════════════════════════════════════════════ */
    .section-usages {
      padding: 100px 5% 80px;
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
    }
    .usages-grid {
      max-width: var(--max); margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    }
    .usage-card {
      position: relative; padding: 32px;
      background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
      border: 1px solid rgba(15,23,42,.08);
      border-radius: 20px;
      box-shadow: 0 18px 44px rgba(15,23,42,.06);
      transition: transform .3s, box-shadow .3s;
    }
    .usage-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 26px 56px rgba(15,23,42,.1);
    }
    .usage-icon {
      display: inline-flex;
      width: 52px; height: 52px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      color: #fff; font-size: 20px; font-weight: 800;
      align-items: center; justify-content: center;
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(37,99,235,.22);
    }
    .usage-card:nth-child(2) .usage-icon { background: linear-gradient(135deg, #0891b2, #67e8f9); box-shadow: 0 10px 24px rgba(8,145,178,.22); }
    .usage-card:nth-child(3) .usage-icon { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 10px 24px rgba(124,58,237,.22); }
    .usage-card:nth-child(4) .usage-icon { background: linear-gradient(135deg, #c0892f, #f3cd82); box-shadow: 0 10px 24px rgba(192,137,47,.22); }
    .usage-card h3 {
      font-size: 22px; font-weight: 800; color: var(--ink);
      margin: 0 0 10px;
      letter-spacing: -.02em; line-height: 1.2;
    }
    .usage-card p {
      font-size: 14.5px; color: var(--muted);
      margin: 0; line-height: 1.6;
    }

    /* ═══════════════════════════════════════════════════
       MODULES PARCOURS Z
    ═══════════════════════════════════════════════════ */
    .offre-reveal {
      padding: 80px 5%; position: relative;
    }
    .offre-reveal-inner {
      max-width: var(--max); margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(380px, 1fr) 1.15fr;
      gap: 56px; align-items: start;
      position: relative;
    }
    .offre-reveal-inner > * { min-width: 0; }
    .offre-reveal-eyebrow {
      display: inline-flex; align-items: center; gap: 14px;
      font-size: 12px; font-weight: 800;
      letter-spacing: .3em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 18px;
    }
    .offre-reveal-eyebrow::before {
      content: ""; width: 30px; height: 1.5px; background: var(--gold);
    }
    .offre-reveal-name {
      font-size: clamp(34px, 4vw, 54px);
      line-height: 1.04; letter-spacing: -.04em;
      font-weight: 900; color: var(--ink);
      margin: 0 0 22px;
    }
    .offre-reveal-name .accent {
      background: linear-gradient(135deg, var(--blue), var(--cyan), var(--gold));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .offre-reveal-rule {
      width: 110px; height: 2.5px;
      background: linear-gradient(135deg, var(--blue), var(--cyan), var(--gold));
      margin: 0 0 22px; border-radius: 2px;
    }
    .offre-reveal-promise {
      font-size: clamp(17px, 1.7vw, 21px);
      color: var(--ink); margin: 0 0 22px;
      line-height: 1.5; font-weight: 500;
    }
    .offre-reveal-promise strong { color: var(--blue); font-weight: 800; }
    .offre-reveal-tags { display: flex; flex-wrap: wrap; gap: 10px; }
    .offre-reveal-tag {
      background: rgba(255,255,255,.85);
      color: var(--ink);
      border: 1px solid rgba(15,23,42,.08);
      padding: 8px 16px; border-radius: 999px;
      font-size: 13px; font-weight: 600;
      transition: background .2s, border-color .2s;
    }
    .offre-reveal-tag:hover {
      background: rgba(37,99,235,.06);
      border-color: rgba(37,99,235,.25);
    }
    .offre-right { display: grid; gap: 22px; }
    .offre-details-list { display: grid; gap: 16px; }
    .offre-details-item {
      padding-left: 20px;
      border-left: 2px solid rgba(37,99,235,.18);
      transition: border-color .3s, padding-left .3s;
    }
    .offre-details-item:hover {
      border-left-color: var(--blue);
      padding-left: 26px;
    }
    .offre-details-item h4 {
      font-size: 16px; font-weight: 800;
      color: var(--ink); margin: 0 0 3px;
    }
    .offre-details-item p {
      color: var(--muted);
      font-size: 14.5px; line-height: 1.6; margin: 0;
    }
    .offre-visual-duo {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 14px; margin-top: 4px;
    }
    .offre-visual-duo figure { margin: 0; position: relative; }
    .offre-visual-duo img {
      display: block; width: 100%;
      aspect-ratio: 4 / 3; object-fit: cover;
      border-radius: 12px;
      box-shadow: 0 10px 24px rgba(15,23,42,.1);
      border: 1px solid rgba(15,23,42,.06);
      transition: transform .3s;
    }
    .offre-visual-duo figure:hover img {
      transform: translateY(-3px);
      box-shadow: 0 14px 30px rgba(15,23,42,.14);
    }
    .offre-visual-duo figcaption {
      margin-top: 6px; text-align: center;
      font-size: 11.5px; color: var(--muted);
      font-style: italic; line-height: 1.35;
    }
    .offre-visual-single {
      margin-top: 4px;
    }
    .offre-visual-single img {
      display: block; width: 100%;
      aspect-ratio: 16 / 10; object-fit: cover;
      border-radius: 14px;
      box-shadow: 0 14px 30px rgba(15,23,42,.12);
      border: 1px solid rgba(15,23,42,.06);
    }
    .offre-visual-single figcaption {
      margin-top: 8px; text-align: center;
      font-size: 12px; color: var(--muted);
      font-style: italic;
    }

    /* parcours Z zigzag */
    .parcours-sam .offre-reveal:nth-of-type(even) .offre-reveal-inner > div:first-child { order: 2; }
    .parcours-sam .offre-reveal:nth-of-type(even) .offre-reveal-inner > div:last-child  { order: 1; }

    /* ═══════════════════════════════════════════════════
       SECTION CTA FINALE
    ═══════════════════════════════════════════════════ */
    .section-cta-final {
      padding: 100px 5%;
      background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
      position: relative; overflow: hidden;
    }
    .section-cta-final::before {
      content: ""; position: absolute; inset: 0;
      background:
        radial-gradient(circle at 20% 30%, rgba(37,99,235,.3), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(6,182,212,.25), transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(214,166,74,.2), transparent 50%);
    }
    .cta-final-inner {
      position: relative; z-index: 1;
      max-width: 820px; margin: 0 auto; text-align: center;
    }
    .cta-final-inner h2 {
      font-size: clamp(36px, 5vw, 58px);
      line-height: 1.05; letter-spacing: -.04em;
      font-weight: 800; color: #fff;
      margin: 0 0 18px;
    }
    .cta-final-inner h2 .accent {
      background: linear-gradient(135deg, #60a5fa, #67e8f9, #fcd34d);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .cta-final-inner p {
      font-size: 18px; color: rgba(255,255,255,.8);
      margin: 0 0 32px;
      line-height: 1.6;
    }
    .cta-final-btns {
      display: flex; flex-wrap: wrap; gap: 14px;
      justify-content: center;
    }
    .cta-final-btn-primary {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 16px 32px; border-radius: 999px;
      background: #fff; color: var(--ink);
      font-size: 15px; font-weight: 700; text-decoration: none;
      box-shadow: 0 20px 40px rgba(0,0,0,.3);
      transition: transform .2s, box-shadow .2s;
    }
    .cta-final-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 26px 48px rgba(0,0,0,.4);
    }
    .cta-final-btn-primary::after { content: "→"; font-size: 16px; }
    .cta-final-btn-secondary {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 15px 30px; border-radius: 999px;
      background: transparent; color: #fff;
      font-size: 15px; font-weight: 700; text-decoration: none;
      border: 1px solid rgba(255,255,255,.3);
      transition: background .2s, border-color .2s;
    }
    .cta-final-btn-secondary:hover {
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.6);
    }

    /* Responsive unifié */
    @media (max-width: 900px) {
      .hero-mandat { padding: 70px 5% 56px; }
      .hero-mandat-inner { grid-template-columns: 1fr; gap: 40px; }
      .section-constat, .section-usages { padding: 70px 5% 56px; }
      .constat-duo, .usages-grid { grid-template-columns: 1fr; }
      .hero-pillars { grid-template-columns: 1fr; }
      .offre-reveal { padding: 52px 5%; }
      .offre-reveal-inner {
        grid-template-columns: 1fr !important;
        gap: 32px;
      }
      .parcours-sam .offre-reveal:nth-of-type(even) .offre-reveal-inner > div:first-child { order: 1; }
      .parcours-sam .offre-reveal:nth-of-type(even) .offre-reveal-inner > div:last-child  { order: 2; }
      .offre-visual-duo img { aspect-ratio: 16 / 11; }
      .section-cta-final { padding: 70px 5%; }
    }


    /* ═══════════════════════════════════════════════════
       LIGHTBOX - zoom et carrousel sur images
    ═══════════════════════════════════════════════════ */
    .offre-visual-duo img,
    .offre-visual-single img {
      cursor: zoom-in;
      transition: transform .25s, box-shadow .25s;
    }

/* Form status */
    .form-status { margin-top: 16px; padding: 14px 18px; border-radius: 12px; font-size: 15px; font-weight: 600; display: none; }
    .form-status--ok    { display: block; background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.25); color: #065f46; }
    .form-status--error { display: block; background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.22);  color: #991b1b; }