/* ─── VARIABLES ─────────────────────────────────────── */
    :root {
      --navy:        #002B4E;
      --navy2:       #1C5A5E;
      --teal:        #4A9BAD;
      --teal-light:  #6ABBC8;
      --sky-teal:    #8ECFDA;
      --sky:         #E8F4F8;
      --whatsapp:    #25D366;
      --white:       #ffffff;
      --text-dark:   #0D1E2C;
      --text-muted:  #4A6070;
      --gold:        #C8A96E;
      --gold-light:  #E2C99A;
    }

    /* ─── RESET ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--white);
      color: var(--text-dark);
      overflow-x: hidden;
    }

    /* ─── ANIMATIONS ────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(40px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes shimmer {
      0%   { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes pulse-ring {
      0%   { transform: scale(1); opacity: 0.6; }
      100% { transform: scale(1.6); opacity: 0; }
    }
    @keyframes rotate-slow {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ─── NAV ───────────────────────────────────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 48px;
      background: rgba(0,43,78,0.96);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }
    .nav-logo-icon {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, var(--teal-light), var(--teal));
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
    }
    .nav-logo-text {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 20px;
      color: var(--white);
      letter-spacing: 0.02em;
    }
    .nav-logo-text span { color: var(--teal-light); }
    .nav-links {
      display: flex;
      gap: 32px;
      list-style: none;
    }
    .nav-links a {
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.75);
      text-decoration: none;
      letter-spacing: 0.04em;
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--teal-light); }
    .nav-cta {
      background: var(--teal) !important;
      color: var(--white) !important;
      padding: 10px 22px;
      border-radius: 6px;
      font-weight: 600 !important;
      transition: background 0.2s, transform 0.2s !important;
    }
    .nav-cta:hover { background: var(--teal-light) !important; transform: translateY(-2px); }

    /* ─── HERO ──────────────────────────────────────────── */
    .hero {
      min-height: 100vh;
      background: linear-gradient(145deg, var(--navy) 0%, #0A3040 50%, var(--navy2) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 120px 48px 80px;
    }

    /* Animated grid background */
    .hero-grid-bg {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(74,155,173,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74,155,173,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 10%; right: -5%;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(74,155,173,0.14) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: -15%; left: 5%;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(200,169,110,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Decorative implant ring */
    .hero-ring {
      position: absolute;
      right: 8%;
      top: 50%;
      transform: translateY(-50%);
      width: 380px; height: 380px;
      border-radius: 50%;
      border: 1px solid rgba(74,155,173,0.2);
      display: flex; align-items: center; justify-content: center;
    }
    .hero-ring::before {
      content: '';
      position: absolute;
      width: 300px; height: 300px;
      border-radius: 50%;
      border: 1px dashed rgba(74,155,173,0.15);
      animation: rotate-slow 30s linear infinite;
    }
    .hero-ring::after {
      content: '';
      position: absolute;
      width: 220px; height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(74,155,173,0.12) 0%, transparent 70%);
    }
    .hero-ring-inner {
      position: relative;
      z-index: 2;
      text-align: center;
    }
    .hero-ring-icon { font-size: 64px; display: block; }
    .hero-ring-label {
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--teal-light);
      margin-top: 12px;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 600px;
      animation: fadeIn 1s ease forwards;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(200,169,110,0.12);
      border: 1px solid rgba(200,169,110,0.35);
      color: var(--gold-light);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 8px 16px;
      border-radius: 100px;
      margin-bottom: 28px;
    }
    .hero-badge::before { content: '◆'; font-size: 7px; }
    .hero-title {
      font-family: 'Syne', sans-serif;
      font-size: clamp(38px, 5vw, 64px);
      font-weight: 800;
      line-height: 1.06;
      color: var(--white);
      margin-bottom: 24px;
      letter-spacing: -0.02em;
    }
    .hero-title em {
      font-style: normal;
      background: linear-gradient(90deg, var(--teal-light), var(--sky-teal), var(--teal-light));
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 3s linear infinite;
    }
    .hero-title .gold-word {
      background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 4s linear infinite;
    }
    .hero-subtitle {
      font-size: 17px;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(255,255,255,0.6);
      margin-bottom: 44px;
      max-width: 520px;
    }
    .hero-ctas {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .hero-cta-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--teal);
      color: var(--white);
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      font-size: 15px;
      padding: 16px 32px;
      border-radius: 8px;
      text-decoration: none;
      transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
      box-shadow: 0 8px 32px rgba(74,155,173,0.35);
    }
    .hero-cta-primary:hover {
      background: var(--teal-light);
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(74,155,173,0.45);
    }
    .hero-cta-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: rgba(255,255,255,0.75);
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      font-size: 15px;
      padding: 16px 28px;
      border-radius: 8px;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.2);
      transition: border-color 0.25s, color 0.25s, transform 0.25s;
    }
    .hero-cta-secondary:hover {
      border-color: var(--teal-light);
      color: var(--teal-light);
      transform: translateY(-3px);
    }

    .hero-metrics {
      display: flex;
      gap: 36px;
      margin-top: 52px;
      padding-top: 36px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .metric {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .metric-value {
      font-family: 'Syne', sans-serif;
      font-size: 28px;
      font-weight: 800;
      color: var(--teal-light);
    }
    .metric-label {
      font-size: 12px;
      color: rgba(255,255,255,0.45);
      line-height: 1.4;
    }

    /* ─── SECTION BASE ──────────────────────────────────── */
    section { padding: 100px 48px; }
    .container { max-width: 1100px; margin: 0 auto; }
    .section-eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 14px;
    }
    .section-title {
      font-family: 'Syne', sans-serif;
      font-size: clamp(28px, 4vw, 46px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--navy);
      margin-bottom: 18px;
    }
    .section-lead {
      font-size: 17px;
      font-weight: 300;
      line-height: 1.75;
      color: var(--text-muted);
      max-width: 620px;
      margin-bottom: 56px;
    }

    /* ─── SECTION INTRO FLUX ────────────────────────────── */
    .flux-bg { background: var(--sky); }

    .flux-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      background: rgba(74,155,173,0.1);
      border-radius: 20px;
      overflow: hidden;
    }
    .flux-step {
      background: var(--white);
      padding: 40px 32px;
      position: relative;
      transition: background 0.25s;
    }
    .flux-step:hover { background: #f0fafd; }
    .flux-step-number {
      position: absolute;
      top: 24px; right: 24px;
      font-family: 'Syne', sans-serif;
      font-size: 48px;
      font-weight: 800;
      color: rgba(74,155,173,0.08);
      line-height: 1;
    }
    .flux-icon {
      width: 52px; height: 52px;
      background: linear-gradient(135deg, var(--navy), var(--navy2));
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
      margin-bottom: 20px;
    }
    .flux-title {
      font-family: 'Syne', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 10px;
    }
    .flux-desc {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-muted);
    }
    .flux-tag {
      display: inline-block;
      margin-top: 16px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--teal);
      background: rgba(74,155,173,0.1);
      padding: 4px 12px;
      border-radius: 100px;
    }

    /* ─── BILAN PRÉOPÉRATOIRE ───────────────────────────── */
    .bilan-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }
    .bilan-sticky {
      position: sticky;
      top: 100px;
    }
    .bilan-visual {
      background: linear-gradient(145deg, var(--navy), var(--navy2));
      border-radius: 24px;
      padding: 48px 40px;
      position: relative;
      overflow: hidden;
    }
    .bilan-visual::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 250px; height: 250px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(74,155,173,0.2) 0%, transparent 70%);
    }
    .bilan-visual-title {
      font-family: 'Syne', sans-serif;
      font-size: 22px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 8px;
    }
    .bilan-visual-sub {
      font-size: 13px;
      color: rgba(255,255,255,0.45);
      margin-bottom: 32px;
    }
    .bilan-checklist {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .bilan-check {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      font-size: 14px;
      color: rgba(255,255,255,0.8);
      transition: background 0.2s, transform 0.2s;
    }
    .bilan-check:hover {
      background: rgba(74,155,173,0.15);
      transform: translateX(6px);
    }
    .bilan-check-icon {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--teal), var(--teal-light));
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }

    .bilan-items {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .bilan-item {
      border-radius: 14px;
      border: 1px solid rgba(74,155,173,0.15);
      padding: 24px 26px;
      background: var(--white);
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .bilan-item:hover {
      transform: translateX(8px);
      box-shadow: 0 8px 28px rgba(0,43,78,0.08);
      border-color: var(--teal-light);
    }
    .bilan-item-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 10px;
    }
    .bilan-item-icon {
      font-size: 22px;
    }
    .bilan-item-title {
      font-family: 'Syne', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: var(--navy);
    }
    .bilan-item-text {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-muted);
    }

    /* ─── GUIDE CHIRURGICAL ─────────────────────────────── */
    .guide-bg {
      background: linear-gradient(145deg, var(--navy) 0%, #083040 100%);
    }
    .guide-bg .section-title { color: var(--white); }
    .guide-bg .section-lead  { color: rgba(255,255,255,0.55); }
    .guide-bg .section-eyebrow { color: var(--teal-light); }

    .guide-types {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 64px;
    }
    .guide-type-card {
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.1);
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .guide-type-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 24px 56px rgba(0,0,0,0.3);
    }
    .guide-type-header {
      padding: 32px 28px 24px;
      position: relative;
      overflow: hidden;
    }
    .guide-type-card:nth-child(1) .guide-type-header { background: linear-gradient(135deg, #0A3548, #1C5A5E); }
    .guide-type-card:nth-child(2) .guide-type-header { background: linear-gradient(135deg, #1C3A5E, #2A5A8E); }
    .guide-type-card:nth-child(3) .guide-type-header { background: linear-gradient(135deg, #2A3A2E, #3A6A4E); }
    .guide-type-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 100px;
      margin-bottom: 16px;
    }
    .guide-type-card:nth-child(1) .guide-type-badge { background: rgba(74,155,173,0.25); color: var(--teal-light); }
    .guide-type-card:nth-child(2) .guide-type-badge { background: rgba(100,160,220,0.25); color: #8EC8F0; }
    .guide-type-card:nth-child(3) .guide-type-badge { background: rgba(100,200,140,0.25); color: #80D4A0; }
    .guide-type-title {
      font-family: 'Syne', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 8px;
    }
    .guide-type-subtitle {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
    }
    .guide-type-body {
      background: rgba(255,255,255,0.04);
      padding: 24px 28px;
    }
    .guide-type-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .guide-type-list li {
      font-size: 13px;
      color: rgba(255,255,255,0.65);
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5;
    }
    .guide-type-list li::before {
      content: '→';
      color: var(--teal-light);
      flex-shrink: 0;
      font-weight: 600;
    }

    /* Avantages guide */
    .guide-avantages {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .guide-av {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 24px 20px;
      text-align: center;
      transition: background 0.2s, transform 0.2s;
    }
    .guide-av:hover {
      background: rgba(74,155,173,0.12);
      transform: translateY(-4px);
    }
    .guide-av-icon { font-size: 28px; margin-bottom: 12px; }
    .guide-av-title {
      font-family: 'Syne', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 8px;
    }
    .guide-av-text { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.6; }

    /* ─── WORKFLOW NUMÉRIQUE ────────────────────────────── */
    .workflow-bg { background: var(--sky); }

    .workflow-timeline {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .workflow-timeline::before {
      content: '';
      position: absolute;
      left: 40px;
      top: 24px; bottom: 24px;
      width: 2px;
      background: linear-gradient(180deg, var(--teal), var(--teal-light), var(--sky-teal));
    }
    .wf-item {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 32px;
      padding: 28px 0;
      align-items: flex-start;
      position: relative;
    }
    .wf-item + .wf-item {
      border-top: 1px solid rgba(74,155,173,0.1);
    }
    .wf-dot {
      width: 80px;
      display: flex;
      justify-content: center;
      padding-top: 4px;
    }
    .wf-dot-inner {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--teal), var(--teal-light));
      display: flex; align-items: center; justify-content: center;
      font-family: 'Syne', sans-serif;
      font-size: 16px;
      font-weight: 800;
      color: var(--white);
      position: relative;
      z-index: 1;
      box-shadow: 0 0 0 6px rgba(74,155,173,0.15);
      flex-shrink: 0;
    }
    .wf-content {
      padding: 4px 0;
    }
    .wf-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 10px;
    }
    .wf-title {
      font-family: 'Syne', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--navy);
    }
    .wf-duration {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--teal);
      background: rgba(74,155,173,0.1);
      padding: 4px 10px;
      border-radius: 100px;
    }
    .wf-desc {
      font-size: 14px;
      line-height: 1.75;
      color: var(--text-muted);
      max-width: 640px;
    }
    .wf-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }
    .wf-tag {
      font-size: 12px;
      font-weight: 500;
      color: var(--navy);
      background: rgba(0,43,78,0.07);
      border: 1px solid rgba(0,43,78,0.1);
      padding: 4px 12px;
      border-radius: 100px;
    }

    /* ─── INDICATIONS ───────────────────────────────────── */
    .indic-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }
    .indic-panel {
      border-radius: 20px;
      overflow: hidden;
    }
    .indic-panel-header {
      padding: 28px 32px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .indic-panel.green .indic-panel-header { background: linear-gradient(135deg, #0E3D2E, #1A5E40); }
    .indic-panel.red .indic-panel-header   { background: linear-gradient(135deg, #3D1A1A, #6E2E2E); }
    .indic-panel-icon { font-size: 28px; }
    .indic-panel-title {
      font-family: 'Syne', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: var(--white);
    }
    .indic-panel-sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 2px; }
    .indic-panel-body {
      padding: 24px 32px;
      background: var(--white);
      border: 1px solid rgba(74,155,173,0.12);
      border-top: none;
    }
    .indic-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .indic-list li {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-dark);
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .indic-list li::before {
      content: '✓';
      font-weight: 800;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .indic-panel.green .indic-list li::before { color: #2A9D5C; }
    .indic-panel.red   .indic-list li::before { content: '✕'; color: #C0392B; }

    /* ─── SÉLECTION IMPLANT ─────────────────────────────── */
    .implant-bg {
      background: linear-gradient(145deg, var(--navy), #0A3040);
    }
    .implant-bg .section-title { color: var(--white); }
    .implant-bg .section-lead  { color: rgba(255,255,255,0.55); }
    .implant-bg .section-eyebrow { color: var(--teal-light); }

    .implant-table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 16px;
      overflow: hidden;
    }
    .implant-table thead tr {
      background: rgba(74,155,173,0.2);
    }
    .implant-table th {
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--teal-light);
      padding: 18px 24px;
      text-align: left;
    }
    .implant-table tbody tr {
      border-bottom: 1px solid rgba(255,255,255,0.06);
      transition: background 0.2s;
    }
    .implant-table tbody tr:hover { background: rgba(74,155,173,0.07); }
    .implant-table td {
      font-size: 14px;
      color: rgba(255,255,255,0.75);
      padding: 18px 24px;
      line-height: 1.5;
    }
    .implant-table td:first-child {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      color: var(--white);
    }
    .badge-opt {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 100px;
    }
    .badge-yes { background: rgba(42,157,92,0.2); color: #80D4A0; }
    .badge-no  { background: rgba(192,57,43,0.2); color: #F0A09A; }
    .badge-opt-in { background: rgba(74,155,173,0.2); color: var(--teal-light); }

    /* ─── SUIVI POSTOP ──────────────────────────────────── */
    .postop-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .postop-card {
      border-radius: 18px;
      border: 1px solid rgba(74,155,173,0.15);
      overflow: hidden;
      background: var(--white);
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .postop-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 48px rgba(0,43,78,0.10);
    }
    .postop-card-header {
      padding: 24px 24px 20px;
      background: linear-gradient(135deg, var(--navy), var(--navy2));
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .postop-card-icon { font-size: 28px; }
    .postop-card-title {
      font-family: 'Syne', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: var(--white);
    }
    .postop-card-timing {
      font-size: 12px;
      color: var(--teal-light);
      margin-top: 2px;
    }
    .postop-card-body {
      padding: 22px 24px;
    }
    .postop-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .postop-list li {
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-muted);
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .postop-list li::before {
      content: '–';
      color: var(--teal);
      font-weight: 600;
      flex-shrink: 0;
    }

    /* ─── CHIFFRES CLÉS ─────────────────────────────────── */
    .chiffres-bg { background: var(--sky); }
    .chiffres-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .chiffre-card {
      background: var(--white);
      border-radius: 18px;
      padding: 36px 24px;
      text-align: center;
      border: 1px solid rgba(74,155,173,0.15);
      position: relative;
      overflow: hidden;
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .chiffre-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--teal), var(--teal-light));
    }
    .chiffre-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 48px rgba(0,43,78,0.10);
    }
    .chiffre-value {
      font-family: 'Syne', sans-serif;
      font-size: 42px;
      font-weight: 800;
      color: var(--teal);
      line-height: 1;
      margin-bottom: 8px;
    }
    .chiffre-unit {
      font-size: 18px;
      color: var(--teal-light);
    }
    .chiffre-label {
      font-family: 'Syne', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 6px;
    }
    .chiffre-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

    /* ─── CTA SECTION ───────────────────────────────────── */
    .cta-section {
      background: linear-gradient(135deg, var(--navy), var(--navy2));
      padding: 100px 48px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-section::before {
      content: '';
      position: absolute;
      top: -100px; left: 50%;
      transform: translateX(-50%);
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(74,155,173,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .cta-title {
      font-family: 'Syne', sans-serif;
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 800;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
    }
    .cta-title em {
      font-style: normal;
      background: linear-gradient(90deg, var(--teal-light), var(--sky-teal));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .cta-text {
      font-size: 17px;
      color: rgba(255,255,255,0.55);
      max-width: 520px;
      margin: 0 auto 44px;
      line-height: 1.7;
      position: relative;
      z-index: 1;
    }
    .cta-buttons {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    .cta-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--teal);
      color: var(--white);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 16px;
      padding: 18px 36px;
      border-radius: 10px;
      text-decoration: none;
      transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
      box-shadow: 0 8px 32px rgba(74,155,173,0.4);
    }
    .cta-btn-primary:hover {
      background: var(--teal-light);
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(74,155,173,0.5);
    }
    .cta-btn-wa {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--whatsapp);
      color: var(--white);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 16px;
      padding: 18px 36px;
      border-radius: 10px;
      text-decoration: none;
      transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
      box-shadow: 0 8px 32px rgba(37,211,102,0.3);
    }
    .cta-btn-wa:hover {
      background: #1DA851;
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(37,211,102,0.45);
    }

    /* ─── FOOTER ────────────────────────────────────────── */
    footer {
      background: var(--navy);
      color: rgba(255,255,255,0.5);
      padding: 40px 48px;
      text-align: center;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .footer-logo {
      font-family: 'Syne', sans-serif;
      font-size: 22px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 12px;
    }
    .footer-logo span { color: var(--teal-light); }
    .footer-nav {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin: 16px 0;
      list-style: none;
      flex-wrap: wrap;
    }
    .footer-nav a {
      font-size: 13px;
      color: rgba(255,255,255,0.4);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-nav a:hover { color: var(--teal-light); }
    .footer-legal {
      font-size: 12px;
      color: rgba(255,255,255,0.3);
      max-width: 560px;
      margin: 20px auto 0;
      line-height: 1.7;
    }

    /* ─── WHATSAPP FLOAT ────────────────────────────────── */
    .wa-float {
      position: fixed;
      bottom: 28px; right: 28px;
      z-index: 999;
      width: 58px; height: 58px;
      border-radius: 50%;
      background: var(--whatsapp);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 28px rgba(37,211,102,0.45);
      text-decoration: none;
      font-size: 26px;
      transition: transform 0.25s, box-shadow 0.25s;
      animation: float 4s ease-in-out infinite;
    }
    .wa-float::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--whatsapp);
      animation: pulse-ring 2s ease-out infinite;
    }
    .wa-float:hover {
      transform: scale(1.12);
      box-shadow: 0 12px 36px rgba(37,211,102,0.6);
    }
    .wa-float svg { position: relative; z-index: 1; }

    /* ─── RESPONSIVE ────────────────────────────────────── */
    @media (max-width: 900px) {
      nav { padding: 16px 24px; }
      .nav-links { display: none; }
      section { padding: 72px 24px; }
      .hero { padding: 100px 24px 64px; min-height: auto; }
      .hero-ring { display: none; }
      .hero-content { max-width: 100%; }
      .flux-grid { grid-template-columns: 1fr; }
      .bilan-layout { grid-template-columns: 1fr; }
      .bilan-sticky { position: static; }
      .guide-types { grid-template-columns: 1fr; }
      .guide-avantages { grid-template-columns: 1fr 1fr; }
      .indic-grid { grid-template-columns: 1fr; }
      .implant-table { font-size: 12px; }
      .implant-table th, .implant-table td { padding: 12px 14px; }
      .postop-grid { grid-template-columns: 1fr; }
      .chiffres-grid { grid-template-columns: 1fr 1fr; }
      .hero-metrics { flex-wrap: wrap; gap: 24px; }
      .cta-section { padding: 72px 24px; }
    }

/* ─── SCALABLE STRUCTURE ADDITIONS ─────────────────────── */
.soon-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(200,169,110,0.35);
  background: rgba(200,169,110,0.12);
  color: var(--gold-light);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  -webkit-text-fill-color: var(--gold-light);
}

@media (max-width: 900px) {
  .soon-badge {
    display: inline-flex;
    margin-left: 0;
    margin-top: 12px;
    font-size: 13px;
    padding: 6px 12px;
  }
}

/* ===============================
   MOBILE RESPONSIVE FIX
================================ */

@media (max-width: 900px){

  .hero{
    min-height:auto;
    padding:120px 22px 70px;
    align-items:flex-start;
    justify-content:flex-start;
  }

  .hero-content{
    max-width:100%;
  }

  .hero-title{
    font-size:38px;
    line-height:1.15;
  }

  .hero-subtitle{
    font-size:15px;
    line-height:1.8;
  }

  .hero-ctas{
    flex-direction:column;
  }

  .hero-cta-primary,
  .hero-cta-secondary{
    width:100%;
    justify-content:center;
  }

  .hero-metrics{
    flex-direction:column;
    gap:18px;
  }

  .hero-ring{
    display:none;
  }

  section{
    padding:70px 22px;
  }

  .flux-grid,
  .bilan-layout,
  .guide-types,
  .indic-grid,
  .postop-grid,
  .chiffres-grid{
    grid-template-columns:1fr !important;
  }

  .guide-avantages{
    grid-template-columns:1fr 1fr;
  }

  .wf-item{
    grid-template-columns:52px 1fr;
    gap:16px;
  }

  .workflow-timeline::before{
    left:26px;
  }

  .implant-table{
    min-width:760px;
  }
}

@media (max-width:480px){

  .hero-title{
    font-size:32px;
  }

  .guide-avantages{
    grid-template-columns:1fr;
  }

  .soon-badge{
    display:inline-flex;
    margin-top:10px;
    font-size:12px;
  }
}

/* ── NEW NOVALIGN PRESENTATION / WORKFLOW ── */
.about-novalign { background: white; }
.about-layout { display:grid; grid-template-columns: 1.15fr .85fr; gap:42px; align-items:center; margin-top:44px; }
.about-copy p { color:var(--muted); line-height:1.8; font-size:16px; margin-bottom:18px; }
.check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:24px; }
.check-card { background:var(--sky); border:1px solid rgba(26,122,138,.12); border-radius:14px; padding:16px; color:var(--navy); font-weight:700; font-size:14px; }
.about-panel { background:linear-gradient(135deg,var(--navy),#123d61); color:white; border-radius:26px; padding:32px; box-shadow:0 20px 55px rgba(13,43,78,.20); }
.about-panel h3 { font-size:24px; margin-bottom:16px; color:white; }
.about-panel ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.about-panel li { color:rgba(255,255,255,.82); line-height:1.55; }
.about-panel li::before { content:'✓'; color:var(--teal-light); font-weight:800; margin-right:10px; }

.process { background:linear-gradient(135deg,var(--sky) 0%,#fff 100%); }
.process-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:50px; }
.process-step { background:white; border-radius:18px; padding:24px 18px; border:1px solid rgba(26,122,138,.12); box-shadow:0 10px 30px rgba(13,43,78,.06); position:relative; }
.process-num { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-light)); color:white; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; margin-bottom:16px; }
.process-step h3 { font-size:16px; color:var(--navy); margin-bottom:8px; }
.process-step p { color:var(--muted); font-size:13px; line-height:1.65; }

.dossier { background:white; }
.dossier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.dossier-item { background:var(--gray); border-radius:16px; padding:22px; border-left:4px solid var(--teal); }
.dossier-item h3 { color:var(--navy); font-size:16px; margin-bottom:8px; }
.dossier-item p { color:var(--muted); font-size:14px; line-height:1.6; }

.triple-layer { background:var(--navy); color:white; }
.triple-layer .section-title { color:white; }
.triple-layer .section-sub { color:rgba(255,255,255,.66); }
.layer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px; }
.layer-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:20px; padding:28px; }
.layer-card h3 { color:var(--teal-light); font-size:18px; margin-bottom:10px; }
.layer-card p { color:rgba(255,255,255,.68); line-height:1.7; font-size:14px; }
.layer-benefits { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:28px; }
.layer-benefits span { background:rgba(43,191,206,.12); border:1px solid rgba(43,191,206,.22); color:rgba(255,255,255,.84); padding:12px; border-radius:14px; font-size:13px; text-align:center; }

.guide-note { background:var(--gray); }
.guide-card { margin-top:36px; background:white; border-radius:22px; padding:34px; border:1px solid rgba(26,122,138,.12); box-shadow:0 14px 40px rgba(13,43,78,.08); }
.guide-card p { color:var(--muted); line-height:1.8; font-size:15px; }

.soft-comparison { background:white; }
.soft-comparison .compare-wrap { box-shadow:0 14px 40px rgba(13,43,78,.08); }

@media(max-width:1024px){
  .about-layout,.process-steps,.dossier-grid,.layer-grid,.layer-benefits{grid-template-columns:1fr 1fr;}
  .process-steps{gap:16px;}
}
@media(max-width:600px){
  .about-layout,.check-grid,.process-steps,.dossier-grid,.layer-grid,.layer-benefits{grid-template-columns:1fr;}
  .about-panel,.guide-card{padding:24px;}
}

/* ── NAV: brand & hamburger positioning ──────────────────── */
.brand {
  display: flex;
  align-items: center;
}

.brand img {
  height: 56px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  nav {
    padding: 12px 20px;
    min-height: 72px;
  }

  .brand img {
    height: 50px;
  }
}