/* ── Tokens ── */
    :root {
      --navy:    #1D3A5C;
      --cyan:    #5BCCE8;
      --cyan-mid:#2BA8C5;
      --white:   #FFFFFF;
      --light:   #F0F8FC;
      --grey:    #64748B;
      --border:  #D1E8F0;
      --radius:  12px;
      --shadow:  0 4px 24px rgba(29,58,92,.12);
    }

    /* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: 'Montserrat', sans-serif;
      color: var(--navy);
      background: var(--white);
      line-height: 1.6;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }

    /* ── Utilities ── */
    .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
    .section { padding: 80px 0; }
    .section--dark { background: var(--navy); color: var(--white); }
    .section--light { background: var(--light); }
    .tag {
      display: inline-block;
      background: var(--cyan);
      color: var(--navy);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: 999px;
      margin-bottom: 16px;
    }
    .tag--white { background: rgba(255,255,255,.15); color: var(--white); }
    h2 {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 900;
      line-height: 1.15;
      text-transform: uppercase;
      letter-spacing: -.01em;
    }
    .subtitle { font-size: 1.05rem; color: var(--grey); margin-top: 14px; max-width: 560px; }
    .subtitle--white { color: rgba(255,255,255,.75); }

    /* ── CTA Button ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--cyan);
      color: var(--navy);
      font-weight: 900;
      font-size: 1rem;
      letter-spacing: .03em;
      text-transform: uppercase;
      padding: 16px 32px;
      border-radius: var(--radius);
      cursor: pointer;
      border: none;
      transition: background .2s, transform .15s;
      white-space: nowrap;
    }
    .btn:hover { background: #3ab8d6; transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }
    .btn--outline {
      background: transparent;
      border: 2px solid var(--white);
      color: var(--white);
    }
    .btn--outline:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }

    /* ── Navbar ── */
    .navbar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--navy);
      padding: 14px 0;
      box-shadow: 0 2px 12px rgba(0,0,0,.2);
    }
    .navbar__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .logo img { height: 40px; width: auto; }
    .nav-cta { font-size: .85rem; padding: 10px 22px; }

    /* ── Hero ── */
    .hero {
      background: var(--navy);
      color: var(--white);
      padding: 80px 0 60px;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: -120px; right: -120px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(91,204,232,.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: center;
    }
    @media (min-width: 768px) {
      .hero__grid { grid-template-columns: 1fr 1fr; }
    }
    .hero__eyebrow {
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 16px;
    }
    .hero h1 {
      font-size: clamp(2.2rem, 5vw, 3.4rem);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -.01em;
      line-height: 1.1;
    }
    .hero h1 span { color: var(--cyan); }
    .hero__desc {
      font-size: 1.05rem;
      color: rgba(255,255,255,.8);
      margin: 20px 0 32px;
      max-width: 480px;
      line-height: 1.7;
    }
    .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
    .hero__trust {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 28px;
      font-size: .8rem;
      color: rgba(255,255,255,.55);
    }
    .hero__trust-dot {
      width: 6px; height: 6px;
      background: var(--cyan);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .hero__visual {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .hero__stat {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(91,204,232,.2);
      border-radius: var(--radius);
      padding: 20px 24px;
      backdrop-filter: blur(8px);
    }
    .hero__stat-num {
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--cyan);
      line-height: 1;
    }
    .hero__stat-label {
      font-size: .85rem;
      color: rgba(255,255,255,.65);
      margin-top: 4px;
    }
    .hero__stats-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    /* ── Problème ── */
    .problems__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 24px;
      margin-top: 48px;
    }
    .problem-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 24px;
      box-shadow: var(--shadow);
      transition: transform .2s;
    }
    .problem-card:hover { transform: translateY(-4px); }
    .problem-card__icon {
      width: 44px; height: 44px;
      background: var(--light);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }
    .problem-card__icon svg { width: 24px; height: 24px; stroke: var(--cyan-mid); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .problem-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .problem-card p { font-size: .9rem; color: var(--grey); line-height: 1.6; }

    /* ── Solution ── */
    .solution__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: center;
      margin-top: 48px;
    }
    @media (min-width: 768px) {
      .solution__grid { grid-template-columns: 1fr 1fr; }
    }
    .solution__device {
      background: var(--navy);
      border-radius: 20px;
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      box-shadow: 0 20px 60px rgba(29,58,92,.25);
    }
    .solution__device-top {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .solution__device-logo {
      font-size: 1.1rem;
      font-weight: 900;
      color: var(--white);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .solution__device-logo span { color: var(--cyan); }
    .device-illustration {
      width: 100%;
      height: 180px;
      background: linear-gradient(135deg, rgba(91,204,232,.1) 0%, rgba(43,168,197,.05) 100%);
      border: 1px solid rgba(91,204,232,.2);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .device-illustration svg { width: 80px; height: 80px; opacity: .6; }
    .solution__badge {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(91,204,232,.1);
      border: 1px solid rgba(91,204,232,.2);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: .8rem;
      font-weight: 600;
      color: var(--cyan);
    }
    .solution__badge svg { width: 16px; height: 16px; stroke: var(--cyan); fill: none; stroke-width: 2.5; }
    .solution__list { display: flex; flex-direction: column; gap: 20px; }
    .solution__item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
    .solution__item-num {
      width: 36px; height: 36px;
      min-width: 36px;
      background: var(--navy);
      color: var(--white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: .85rem;
    }
    .solution__item h4 { font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
    .solution__item p { font-size: .88rem; color: var(--grey); }

    /* ── Process ── */
    .process__steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 0;
      margin-top: 56px;
      position: relative;
    }
    .process__step {
      text-align: center;
      padding: 0 24px 32px;
      position: relative;
    }
    .process__step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 28px;
      right: -1px;
      width: 2px;
      height: 40px;
      background: var(--border);
    }
    @media (min-width: 640px) {
      .process__step:not(:last-child)::after {
        top: 24px;
        right: 0;
        width: calc(50% + 24px);
        height: 2px;
        left: 50%;
        transform: translateX(28px);
      }
    }
    .process__num {
      width: 56px; height: 56px;
      background: var(--cyan);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: 900;
      color: var(--navy);
      margin: 0 auto 20px;
      position: relative;
      z-index: 1;
    }
    .process__step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .process__step p { font-size: .88rem; color: var(--grey); }
    .process__step--dark h3 { color: var(--white); }
    .process__step--dark p { color: rgba(255,255,255,.6); }

    /* ── Avantages ── */
    .benefits__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 48px;
    }
    .benefit {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 24px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(91,204,232,.15);
      border-radius: var(--radius);
    }
    .benefit__icon {
      width: 40px; height: 40px;
      min-width: 40px;
      background: rgba(91,204,232,.15);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .benefit__icon svg { width: 20px; height: 20px; stroke: var(--cyan); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .benefit h4 { font-size: .95rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
    .benefit p { font-size: .85rem; color: rgba(255,255,255,.6); }

    /* ── Témoignages ── */
    .testimonials__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      margin-top: 48px;
    }
    .testimonial {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px;
      box-shadow: var(--shadow);
    }
    .stars { display: flex; gap: 4px; margin-bottom: 16px; }
    .star { width: 18px; height: 18px; fill: #F59E0B; }
    .testimonial__quote {
      font-size: .95rem;
      color: var(--grey);
      line-height: 1.7;
      font-style: italic;
      margin-bottom: 20px;
    }
    .testimonial__author {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .testimonial__avatar {
      width: 44px; height: 44px;
      background: var(--navy);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      color: var(--cyan);
      font-size: .9rem;
      flex-shrink: 0;
    }
    .testimonial__name { font-weight: 700; font-size: .9rem; }
    .testimonial__location { font-size: .8rem; color: var(--grey); }

    /* ── Pricing ── */
    .pricing__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      margin-top: 56px;
      align-items: stretch;
    }
    .pricing-card {
      background: var(--white);
      border: 2px solid var(--border);
      border-radius: 20px;
      padding: 36px 28px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      position: relative;
      transition: transform .2s, box-shadow .2s;
    }
    .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(29,58,92,.18); }
    .pricing-card--featured {
      border-color: var(--cyan);
      background: var(--navy);
      color: var(--white);
    }
    .pricing-card--featured .pricing-desc { color: rgba(255,255,255,.65); }
    .pricing-card--featured .pricing-include li { color: rgba(255,255,255,.75); }
    .pricing-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--cyan);
      color: var(--navy);
      font-size: .7rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 5px 18px;
      border-radius: 999px;
      white-space: nowrap;
    }
    .pricing-name {
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--cyan-mid);
      margin-bottom: 10px;
    }
    .pricing-card--featured .pricing-name { color: var(--cyan); }
    .pricing-title {
      font-size: 1.35rem;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .pricing-target {
      font-size: .82rem;
      color: var(--grey);
      margin-bottom: 24px;
    }
    .pricing-card--featured .pricing-target { color: rgba(255,255,255,.5); }
    .pricing-price {
      font-size: 2.8rem;
      font-weight: 900;
      color: var(--navy);
      line-height: 1;
      margin-bottom: 4px;
    }
    .pricing-card--featured .pricing-price { color: var(--cyan); }
    .pricing-tax {
      font-size: .8rem;
      color: var(--grey);
      margin-bottom: 28px;
    }
    .pricing-card--featured .pricing-tax { color: rgba(255,255,255,.45); }
    .pricing-desc {
      font-size: .88rem;
      color: var(--grey);
      line-height: 1.6;
      margin-bottom: 24px;
    }
    .pricing-include {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 32px;
      flex: 1;
    }
    .pricing-include li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: .88rem;
      color: var(--grey);
    }
    .pricing-include li svg {
      width: 16px; height: 16px;
      stroke: var(--cyan-mid);
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .pricing-card--featured .pricing-include li svg { stroke: var(--cyan); }
    .pricing-cta {
      display: block;
      text-align: center;
      background: var(--cyan);
      color: var(--navy);
      font-weight: 900;
      font-size: .95rem;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 14px 24px;
      border-radius: var(--radius);
      transition: background .2s, transform .15s;
      cursor: pointer;
    }
    .pricing-cta:hover { background: #3ab8d6; transform: translateY(-2px); }
    .pricing-cta--outline {
      background: transparent;
      border: 2px solid var(--cyan);
      color: var(--cyan);
    }
    .pricing-cta--outline:hover { background: rgba(91,204,232,.1); }
    .pricing-note {
      text-align: center;
      margin-top: 32px;
      font-size: .82rem;
      color: var(--grey);
    }
    .pricing-entretien {
      background: var(--light);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 32px;
      flex-wrap: wrap;
    }
    .pricing-entretien__left h4 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
    .pricing-entretien__left p { font-size: .85rem; color: var(--grey); }
    .pricing-entretien__price { font-size: 1.5rem; font-weight: 900; color: var(--navy); white-space: nowrap; }
    .pricing-entretien__price span { font-size: .85rem; font-weight: 400; color: var(--grey); }

    /* ── CTA Final ── */
    .cta-section {
      background: var(--navy);
      padding: 80px 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-section::before {
      content: '';
      position: absolute;
      bottom: -80px; left: 50%;
      transform: translateX(-50%);
      width: 600px; height: 400px;
      background: radial-gradient(circle, rgba(91,204,232,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .cta-section h2 { color: var(--white); max-width: 640px; margin: 0 auto; }
    .cta-section p {
      color: rgba(255,255,255,.7);
      font-size: 1.05rem;
      margin: 16px auto 36px;
      max-width: 500px;
    }
    .cta-section .btn { font-size: 1.1rem; padding: 18px 40px; }
    .cta-reassurance {
      margin-top: 20px;
      font-size: .8rem;
      color: rgba(255,255,255,.45);
    }

    /* ── Footer ── */
    .footer {
      background: #0F2540;
      color: rgba(255,255,255,.5);
      padding: 40px 0;
      font-size: .85rem;
    }
    .footer__inner {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      text-align: center;
    }
    @media (min-width: 640px) {
      .footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
      }
    }
    .footer__logo { font-weight: 900; color: var(--white); letter-spacing: .06em; font-size: 1rem; }
    .footer__logo span { color: var(--cyan); }
    .footer__links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
    .footer__links a { color: rgba(255,255,255,.5); transition: color .2s; }
    .footer__links a:hover { color: var(--cyan); }

    /* ── Typebot inline embed ── */
    .typebot-wrap {
      margin-top: 40px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    typebot-standard {
      width: 100%;
      height: 580px;
      display: block;
      border-radius: 20px;
    }

    /* ── Responsive ── */
    @media (max-width: 640px) {
      .section { padding: 56px 0; }
      .process__step:not(:last-child)::after { display: none; }
    }

    /* ════════════════════════════════════════════════════
       AJOUTS — pages de contenu SEO (brouillons P2)
       (Claude 13/06 — mêmes tokens que la charte de Fable)
       ════════════════════════════════════════════════════ */
    .breadcrumb { font-size:.8rem; color:var(--grey); padding:20px 0 0; }
    .breadcrumb a { color:var(--cyan-mid); font-weight:600; }
    .breadcrumb a:hover { color:var(--navy); }
    .prose { max-width:780px; }
    .prose p { color:var(--grey); margin-bottom:18px; line-height:1.75; }
    .prose h3 { font-size:1.3rem; font-weight:800; margin:36px 0 12px; color:var(--navy); }
    .prose ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 0 22px; }
    .prose ul li { position:relative; padding-left:30px; color:var(--grey); line-height:1.6; }
    .prose ul li::before { content:''; position:absolute; left:2px; top:7px; width:13px; height:13px; border-radius:50%; background:rgba(91,204,232,.25); border:2px solid var(--cyan-mid); }
    .prose strong { color:var(--navy); }
    .faq { margin-top:40px; display:flex; flex-direction:column; gap:14px; max-width:840px; }
    .faq-item { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:22px 26px; box-shadow:var(--shadow); }
    .faq-item h3 { font-size:1.02rem; font-weight:700; margin-bottom:8px; }
    .faq-item p { font-size:.92rem; color:var(--grey); line-height:1.65; }
    .local-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
    .local-links a { display:inline-block; background:var(--white); border:1px solid var(--border); border-radius:999px; padding:10px 20px; font-size:.85rem; font-weight:600; color:var(--navy); transition:all .2s; }
    .local-links a:hover { border-color:var(--cyan); color:var(--cyan-mid); transform:translateY(-2px); }
    .mini-pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-top:40px; }
    .mini-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; text-align:center; box-shadow:var(--shadow); }
    .mini-card.feat { border:2px solid var(--cyan); }
    .mini-card .mini-price { font-size:1.9rem; font-weight:900; color:var(--navy); line-height:1; margin:8px 0 2px; }
    .mini-card .mini-tax { font-size:.72rem; color:var(--grey); }