/* Naturalink — Apps mobiles sur mesure */

:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f8faf7;
  --color-text: #1a2520;
  --color-text-soft: #5a6b62;
  --color-accent: #2f8a5b;       /* vert Naturalink (nature, lien) */
  --color-accent-dark: #1f6440;
  --color-accent-soft: #e8f4ec;
  --color-line: #e6ece8;
  --color-warm: #d97b3b;         /* accent chaud secondaire */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(20, 40, 30, 0.04), 0 8px 24px rgba(20, 40, 30, 0.06);
  --shadow-card-hover: 0 2px 6px rgba(20, 40, 30, 0.08), 0 16px 40px rgba(20, 40, 30, 0.10);
  --max-width: 1100px;
  --font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-system);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Header ─────────────────────────────────────────── */

.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(255, 255, 255, 0);
  transition: background-color 0.3s ease;
  backdrop-filter: saturate(140%) blur(0px);
  -webkit-box-shadow: 0px 0px 15px 2px rgba(47, 138, 91, 0); 
box-shadow: 0px 0px 15px 2px rgba(47, 138, 91, 0);
  // border-bottom: 1px solid var(--color-line);
  z-index: 50;
 
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.logo-mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: transparent;
  text-align: center;
  line-height: 22px;
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}
.logo-text { letter-spacing: -0.02em; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  font-size: 15px;
  transition: color 0.2s;
}
.nav a:hover { color: var(--color-text); }
.nav-cta {
  background: var(--color-accent);
  color: white !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  transition: background 0.2s, transform 0.1s;
}
.nav-cta:hover { background: var(--color-accent-dark); }
.nav-cta:active { transform: translateY(1px); }

/* ─── Hero ───────────────────────────────────────────── */

.hero {
  padding: 100px 0 80px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, var(--color-accent-soft), #1f64404a 180%),
    var(--color-bg) url('bck-hero-01.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
     display: flex;
  align-items: center;
  justify-content: center;
}
.hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 auto 22px;
  max-width: 820px;
  font-weight: 800;
}
.accent {
  color: var(--color-accent);
  background: linear-gradient(120deg, var(--color-accent), var(--color-warm));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--color-text);
  max-width: 720px;
  margin: 0 auto 36px;
}
.lede strong { color: var(--color-text); font-weight: 600; }
.hero-cta { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.hero-meta {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--color-text-soft);
  font-size: 14px;
}
.hero-meta strong { color: var(--color-text); font-weight: 600; }
.hero-meta .dot { color: var(--color-line); }

/* ─── Boutons ────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
.btn-primary {
  background: var(--color-accent);
  color: white;
  box-shadow: 0 4px 14px rgba(47, 138, 91, 0.28);
}
.btn-primary:hover { background: var(--color-accent-dark); box-shadow: 0 6px 18px rgba(47, 138, 91, 0.35); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: white;
  color: var(--color-text);
  border-color: var(--color-line);
}
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-large { padding: 16px 28px; font-size: 16px; }

/* ─── Sections ───────────────────────────────────────── */

.section { padding: 90px 0; }
.section-pourquoi { background: var(--color-bg); }
.section-process { background: var(--color-bg-alt); }
.section-cas { background: var(--color-bg); }
.section-tarifs { background: var(--color-bg-alt); }
.section-trust { padding: 60px 0; background: var(--color-text); color: white; }
.section-contact { background: var(--color-bg); }

.section-title {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 auto 12px;
  max-width: 720px;
  font-weight: 700;
}
.section-subtitle {
  text-align: center;
  color: var(--color-text-soft);
  max-width: 600px;
  margin: 0 auto 56px;
  font-size: 17px;
}

/* ─── Grilles ────────────────────────────────────────── */

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* ─── Slider démo GIF ────────────────────────────────── */

.section-slider {
  padding: 48px 0;
  background: var(--color-bg-alt);
  overflow: hidden;
}

.slider-wrap {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  /* cache la scrollbar visuellement, reste utilisable au clic/swipe */
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }

.slide-item {
  flex: 0 0 auto;
  width: min(560px, 82vw);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  scroll-snap-align: center;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  box-shadow: var(--shadow-card);
  position: relative;
}

.slide-label {
  color: white;
  font-weight: 700;
  font-size: 15px;
  background: rgba(0, 0, 0, 0.28);
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: white;
  color: var(--color-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: background 0.2s, transform 0.1s;
  z-index: 2;
}
.slider-arrow:hover { background: var(--color-accent-soft); }
.slider-arrow:active { transform: translateY(-50%) scale(0.94); }
.slider-arrow-prev { left: 4px; }
.slider-arrow-next { right: 4px; }

@media (max-width: 640px) {
  .slider-arrow { display: none; } /* swipe tactile suffit sur mobile */
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.slider-dot.active {
  background: var(--color-accent);
  transform: scale(1.3);
}


/* ─── Cartes "Pourquoi nous" ─────────────────────────── */

.card {
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-accent-soft);
}
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 18px;
}
.card h3 {
  font-size: 20px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.card p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* ─── Process en étapes ──────────────────────────────── */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }

.step {
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: white;
  font-weight: 700;
  margin-bottom: 14px;
}
.step h3 {
  font-size: 18px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.step p { margin: 0; color: var(--color-text-soft); font-size: 15px; }

/* ─── Cas d'usage ────────────────────────────────────── */

.case {
  padding: 24px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background 0.2s, transform 0.2s;
}
.case:hover { background: var(--color-accent-soft); transform: translateX(4px); }
.case h3 { font-size: 18px; margin: 0 0 8px; }
.case p { margin: 0; color: var(--color-text-soft); font-size: 15px; }
.case em { color: var(--color-accent-dark); font-style: normal; font-weight: 600; }

/* ─── Tarifs ─────────────────────────────────────────── */

.price-card {
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.price-card-featured {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-card);
}
.price-badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--color-accent);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.price-card h3 {
  font-size: 18px;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.price-amount, .price-description {
  font-size: 17px;
  color: var(--color-text-soft);
  margin: 0 0 20px;
}
.price-amount strong {
  color: var(--color-text);
  font-size: 26px;
  display: inline;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}
.price-features li {
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--color-text-soft);
  font-size: 15px;
  border-bottom: 1px solid var(--color-line);
}
.price-features li:last-child { border-bottom: none; }
.price-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}
.price-example {
  font-size: 13px;
  color: var(--color-text-soft);
  font-style: italic;
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--color-line);
}
.price-note {
  text-align: center;
  color: var(--color-text-soft);
  font-size: 14px;
  margin-top: 32px;
}

/* ─── Trust bar (fond foncé) ─────────────────────────── */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 860px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-grid { grid-template-columns: 1fr; } }

.trust-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trust-item strong {
  font-size: 22px;
  letter-spacing: -0.01em;
  color: white;
}
.trust-item span { font-size: 14px; color: rgba(255, 255, 255, 0.7); }

/* ─── Formulaire contact ─────────────────────────────── */

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
}
.contact-form label {
  display: block;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.contact-form label > span { display: block; margin-bottom: 6px; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.contact-form textarea { resize: vertical; min-height: 110px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-row label { margin-bottom: 0; }
.form-rgpd {
  font-size: 12px;
  color: var(--color-text-soft);
  text-align: center;
  margin: 14px 0 0;
}

/* ─── Footer ─────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--color-line);
  padding: 32px 0;
  background: var(--color-bg-alt);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a {
  text-decoration: none;
  color: var(--color-text-soft);
  font-size: 14px;
}
.footer-links a:hover { color: var(--color-accent); }
.footer-copy { font-size: 13px; color: var(--color-text-soft); }

/* ─── Animations au scroll ───────────────────────────── */

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

/* ─── Menu mobile  ───────────────────────────── */
@media screen and (min-width: 768px) {
  .natura-mobile-menu-button, .natura-mobile-menu {
    display:none!important;
  }
}
@media screen and (max-width: 767px) {
  .nav {
    display:none!important;
  }
}
 .natura-mobile-menu-button {
      background: linear-gradient(to right, var(--color-accent), var(--color-accent-dark));
      display: flex;
      padding: 9px 18px;
      border-radius: 9999px;
      box-shadow: 0 2px 40px -10px var(--color);
      color: white !important;
      font-size: 16px;
      white-space: nowrap;


      cursor: pointer;
      z-index: 105;
      transition: 0.15s cubic-bezier(.33, 1, .53, 1);
      font-weight: 600;
    }

    .natura-mobile-menu-button[hidden] {
      transform: translateX(200%);
    }

    .natura-mobile-menu {
      --x: 2.5%;
      --y: 0;
      --z: 0;

      display: block;
      width: 95%;
      padding-bottom: 15px;
      border-radius: 20px;
      box-shadow: 0 -9px 50px -30px black;
      font-family: 'Montserrat', sans-serif;
      position: fixed;
      bottom: 1%;
      z-index: 105;
      transform: translate3d(var(--x), var(--y), var(--z));
      transition: 0.2s cubic-bezier(.33, 1, .53, 1);
      left: 0;
      background-color: rgba(47, 138, 91, .2);
      transition: background-color 0.3s ease;
      backdrop-filter: saturate(140%) blur(4px);
      -webkit-box-shadow: 0px 0px 15px 2px rgba(47, 138, 91, 0);
    }

    .natura-mobile-menu[hidden] {
      --y: 150%;
    }

    .natura-mobile-menu>*:not(:last-child) {
      border-bottom: 2px solid var(--neutral);
    }

    .natura-mobile-menu-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
    }

    .natura-mobile-menu-header label {
      font-size: 28px;
    }


    .natura-mobile-menu-header p {
      font-size: 28px;
      font-weight: bold;
      white-space: nowrap;
      margin: 0;
    }

    .natura-mobile-menu-header button {
      background: transparent;
      cursor: pointer;
      border: none;
      outline: none;
      font-size: 28px;
    }


    .natura-mobile-menu-links {
      display: flex;
      padding: 10px 15px;
      font-weight: bold;
      overflow-x: auto;
    }

    .natura-mobile-menu-links a {
      color: var(--color-text);
      font-weight: 500;
      font-size: 16px;
      text-decoration: none;
      transition: color 0.2s;
      flex: 1;
      text-align: center;
    }

    .natura-mobile-menu-contact {
      width: fit-content;
      margin: auto;
      text-align: center;
      padding: 14px 24px;
    }


    .natura-mobile-menu-contact a {
      font-weight: 600;
      font-size: 15px;
      color: white;
      text-decoration: none;
    }
/* ─── Agenda HubSpot Meetings ─────────────────────────── */

.meetings-wrap {
  max-width: 760px;
  margin: 0 auto 40px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-line);
}

.meetings-iframe-container {
  width: 100%;
  min-height: 600px;
}

.meetings-iframe-container iframe {
  width: 100%;
  min-height: 600px;
  border: none;
}



/* ═══════════════════════════════════════════════════════
   MENTIONS LÉGALES — styles spécifiques
   ═══════════════════════════════════════════════════════ */

/* ─── Hero ───────────────────────────────────────────── */
.ml-hero {
  padding: 100px 0 56px;
  text-align: center;
  background: linear-gradient(160deg, var(--color-accent-soft) 0%, #d4eadc 40%, #c8e4d2 100%);
  position: relative;
  overflow: hidden;
  width: 100%;
}
.ml-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(47,138,91,0.15), transparent 70%);
}
.ml-hero-content {
  position: relative;
  z-index: 1;
}
.ml-hero h1 {
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: 14px;
  line-height: 1.1;
  word-break: break-word;
}
.ml-hero h1 span {
  color: var(--color-accent);
  background: linear-gradient(120deg, var(--color-accent), var(--color-warm));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ml-hero p {
  color: var(--color-text-soft);
  font-size: clamp(14px, 2vw, 17px);
  max-width: 520px;
  margin: 0 auto;
  padding: 0 8px;
}
.ml-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-soft);
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.ml-hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Bouton retour ──────────────────────────────────── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: white;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  margin-top: 20px;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-card);
}
.btn-back:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
}
.btn-back svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Breadcrumb ─────────────────────────────────────── */
.breadcrumb {
  padding: 12px 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-soft);
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--color-line); }

/* ─── Section body — PAS de overflow:hidden ! ────────── */
.ml-body {
  padding: 40px 0 60px;
  background: var(--color-bg-alt);
  width: 100%;
}

/* ─── Layout centré (sans sommaire) ──────────────────── */
.ml-layout {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* ─── Articles ───────────────────────────────────────── */
.ml-articles {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
}
.ml-article {
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s;
  scroll-margin-top: 80px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 640px) {
  .ml-article { padding: 32px 36px; }
}
.ml-article:hover { box-shadow: var(--shadow-card-hover); }

.ml-article-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.ml-article-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ml-article h2 {
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  word-break: break-word;
}
.ml-article p {
  color: var(--color-text-soft);
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 12px;
  word-break: break-word;
}
@media (min-width: 640px) {
  .ml-article p { font-size: 15px; }
}
.ml-article p:last-child { margin-bottom: 0; }
.ml-article p strong { color: var(--color-text); font-weight: 600; }
.ml-article a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}
.ml-article a:hover { text-decoration: underline; }
.ml-article ul {
  margin: 10px 0 12px 18px;
  color: var(--color-text-soft);
  font-size: 14px;
  line-height: 1.8;
}
@media (min-width: 640px) {
  .ml-article ul { font-size: 15px; }
}
.ml-mt { margin-top: 14px !important; }

/* ─── Tables ─────────────────────────────────────────── */
.ml-table-wrap,
.ml-contact-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 16px;
  border-radius: var(--radius-sm);
}
.ml-table,
.ml-contact-table {
  width: 100%;
  min-width: 260px;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ml-table tr,
.ml-contact-table tr {
  border-bottom: 1px solid var(--color-line);
}
.ml-table tr:last-child,
.ml-contact-table tr:last-child {
  border-bottom: none;
}
.ml-table tr:nth-child(even),
.ml-contact-table tr:nth-child(even) {
  background: var(--color-bg-alt);
}
.ml-table td,
.ml-contact-table td {
  padding: 11px 14px;
  vertical-align: middle;
}
.ml-table td:first-child,
.ml-contact-table td:first-child {
  font-weight: 600;
  color: var(--color-text);
  width: 40%;
  font-size: 13px;
  white-space: nowrap;
}
.ml-table td:last-child,
.ml-contact-table td:last-child {
  color: var(--color-text-soft);
  word-break: break-word;
}
@media (max-width: 480px) {
  .ml-table td,
  .ml-contact-table td { padding: 9px 10px; }
  .ml-table td:first-child,
  .ml-contact-table td:first-child { font-size: 12px; }
}

/* ─── Infobox ────────────────────────────────────────── */
.ml-infobox {
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--color-accent-dark);
  line-height: 1.65;
  word-break: break-word;
}
@media (min-width: 640px) {
  .ml-infobox { font-size: 14px; }
}
.ml-infobox strong { color: var(--color-accent-dark); }
.ml-infobox a { color: var(--color-accent-dark); word-break: break-all; }

/* ─── Trust bar ──────────────────────────────────────── */
.ml-trust {
  background: var(--color-text);
  padding: 40px 0;
  width: 100%;
}
.ml-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (min-width: 860px) {
  .ml-trust-grid { grid-template-columns: repeat(4, 1fr); }
}
.ml-trust-grid .trust-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ml-trust-grid .trust-item strong {
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: -0.01em;
  color: white;
}
.ml-trust-grid .trust-item span {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
}

/* ─── Footer lien actif ──────────────────────────────── */
.footer-links a.active {
  color: var(--color-accent);
  font-weight: 600;
}



/* ─── SECTION TEMOIGNAGES ─── */
.temoignage-section {
  padding: 80px 20px;
  background-color: transparent;
}

.temoignage-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* En-tête de la section */
.temoignage-section .section-header {
  text-align: center;
  margin-bottom: 50px;
}

.temoignage-section .section-subtitle {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #2f8a5b;
  margin-bottom: 10px;
}

.temoignage-section .section-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 15px;
}

.temoignage-section .section-description {
  font-size: 1.1rem;
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto;
}

/* Grille des cartes */
.temoignage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

/* Cartes individuelles */
.temoignage-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 35px;
  background: rgba(255, 255, 255, 0.03); /* Effet verre léger si fond sombre */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet de survol harmonisé avec ton header */
.temoignage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 25px -5px rgba(47, 138, 91, 0.2);
  border-color: rgba(47, 138, 91, 0.4);
}

/* Étoiles de notation */
.temoignage-stars {
  color: #ffc107; /* Couleur or pour les étoiles */
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* Contenu textuel */
.temoignage-text {
  font-style: italic;
  line-height: 1.6;
  font-size: 1.05rem;
  margin-bottom: 25px;
  opacity: 0.9;
}

/* Bloc Auteur */
.temoignage-author {
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
}

/* Avatar stylisé */
.author-avatar {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #2f8a5b, #1f6440);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 3px 0;
}

.author-company {
  font-size: 0.85rem;
  opacity: 0.6;
}

/* Responsive pour mobiles */
@media (max-width: 768px) {
  .temoignage-section {
    padding: 50px 15px;
  }
  .temoignage-section .section-title {
    font-size: 1.8rem;
  }
  .temoignage-card {
    padding: 25px;
  }
}




/* ─── MODAL DE PRISE DE RENDEZ-VOUS ─── */

/* L'arrière-plan qui couvre tout l'écran et floute le reste */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4); /* Fond sombre semi-transparent */
  backdrop-filter: blur(8px); /* L'effet de flou moderne derrière la modal */
  -webkit-backdrop-filter: blur(8px); /* Compatibilité Safari */
  z-index: 9999; /* S'assure que la modal passe au-dessus de tout (même du header) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* Évite que la modal colle aux bords sur mobile */
}

/* La carte de la modal centrée */
.modal-content {
  position: relative;
  width: 100%;
  max-width: 460px; /* Largeur maximale sur grand écran */
  max-height: 90vh; /* Évite que la modal dépasse en hauteur si l'écran est petit */
  overflow-y: auto; /* Ajoute un scroll interne si le contenu dépasse en hauteur */
  background: #111a14; /* Ajuste cette couleur selon ton fond (sombre/graphite ici) */
  border: 1px solid rgba(47, 138, 91, 0.3); /* Bordure discrète avec le vert Naturalink */
  border-radius: 16px;
  padding: 40px 30px 35px 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 
              0 0 25px rgba(47, 138, 91, 0.15);
  transform: scale(1);
  transition: transform 0.3s ease;
}

/* Bouton de fermeture (×) */
.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.close-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Titres et textes dans la modal */
.modal-content h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  color: #ffffff;
}

.modal-content p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 25px;
  opacity: 0.8;
}

/* Structure du formulaire interne */
#booking-phone-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffffff;
}

#booking-phone-form input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  margin-bottom: 20px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus sur les champs de saisie */
#booking-phone-form input:focus {
  border-color: #2f8a5b; /* Vert emblématique */
  box-shadow: 0 0 0 3px rgba(47, 138, 91, 0.25);
  background: rgba(255, 255, 255, 0.07);
}

/* Gestion du comportement de masquage native (attribut hidden) */
.modal-overlay[hidden] {
  display: none !important;
}
  #anim { 
  width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    height: 100%;
  }
/* ─── RESPONSIVE DESIGN (Mobiles récents et petits écrans) ─── */
@media (max-width: 480px) {
  .modal-overlay {
    padding: 12px; /* Un peu moins d'espace sur les côtés sur les petits téléphones */
  }

  .modal-content {
    padding: 35px 20px 25px 20px; /* On réduit le padding interne pour gagner de la place */
    border-radius: 12px;
  }

  .modal-content h3 {
    font-size: 1.35rem; /* Titre légèrement plus petit sur mobile */
  }
  
  #booking-phone-form input {
    padding: 10px 12px; /* Inputs un poil plus compacts */
    font-size: 0.95rem;
  }
}

/* ── Visuels du slider de démonstration ─────────────────────────────── */
.slide-item {
  background: #0b1829;   /* le fond des captures : les bords se fondent */
  overflow: hidden;
}

.slide-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.slide-item .slide-label {
  position: relative;    /* passe au-dessus du visuel */
  z-index: 1;
}


/* ══ Champ piege des formulaires ═══════════════════════════════════════════
   ⚠ Il doit etre invisible SANS `display:none` ni l'attribut `hidden` : les
   robots courants sautent les champs masques ainsi, et le piege ne servirait
   plus a rien. On le sort de l'ecran, ce qui le laisse "remplissable". */
.nl-piege {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ══ Fenêtre d'essai d'une application ══════════════════════════════════════ */

/* ── La carte du carrousel devient cliquable ─────────────────────────────────
   Au repos : le GIF seul, net, avec son libellé. Au survol : il s'assombrit et
   se floute, et le bouton apparaît par-dessus.

   ⛔ SUR TACTILE IL N'Y A PAS DE SURVOL. Réserver l'apparition du bouton au
   survol le rendrait invisible sur téléphone, et personne ne devinerait que la
   carte est cliquable. Le bloc « @media (hover: hover) » ne s'applique donc
   qu'aux appareils qui savent survoler ; ailleurs, le bouton reste affiché. */

.slide-item[data-slug] { cursor: pointer; }
.slide-item[data-slug]:focus-visible { outline: 3px solid #7fd3a4; outline-offset: 3px; }

.slide-item[data-slug] .slide-media {
  transition: filter .28s ease, transform .28s ease;
}

.slide-essayer {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 22px; border-radius: 999px;
  background: #2f8a5b; border: 1px solid #3aa66e;
  color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  pointer-events: none;   /* le clic appartient a la carte entiere */
  z-index: 3;
}

/* ── Appareils qui savent survoler : effet au survol ───────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .slide-essayer {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92);
    transition: opacity .24s ease, transform .24s ease;
  }
  .slide-item[data-slug]:hover .slide-media,
  .slide-item[data-slug]:focus-visible .slide-media {
    filter: brightness(.42) blur(4px);
    transform: scale(1.04);
  }
  .slide-item[data-slug]:hover .slide-essayer,
  .slide-item[data-slug]:focus-visible .slide-essayer {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  /* Le libellé reste lisible par-dessus l'image assombrie. */
  .slide-item[data-slug] .slide-label { transition: opacity .24s ease; }
  .slide-item[data-slug]:hover .slide-label { opacity: .55; }
}

/* ── Tactile : pas de survol possible, le bouton reste visible ─────────────── */
@media (hover: none), (pointer: coarse) {
  .slide-essayer {
    top: auto; bottom: 46px;
    transform: translate(-50%, 0);
    padding: 10px 18px; font-size: 13.5px;
    background: rgba(11, 24, 41, .86);
    border-color: rgba(127, 211, 164, .55);
  }
}

/* ⚠ Respecte le réglage système « moins d'animations » : on garde le
   changement d'état, on retire le mouvement. */
@media (prefers-reduced-motion: reduce) {
  .slide-item[data-slug] .slide-media,
  .slide-essayer { transition: none; }
  .slide-item[data-slug]:hover .slide-media { transform: none; }
}

/* La fenêtre elle-même. */
.essai-modale {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 14, 24, .82);
  backdrop-filter: blur(4px);
}
.essai-modale[hidden] { display: none; }

.essai-boite { display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 100%; }

.essai-modale-tete {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 390px; color: #eaf6ef;
}
.essai-modale-tete h3 { margin: 0; font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
.essai-modale-fermer {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  color: #eaf6ef; font-size: 19px; line-height: 1; cursor: pointer;
}
.essai-modale-fermer:hover { background: rgba(255, 255, 255, .2); }

/* ⚠ Hauteur bornée par la fenêtre, sinon sur un téléphone en paysage le
   châssis dépasse et l'on ne voit plus le bouton de fermeture. */
.essai-phone {
  width: 390px; height: min(780px, calc(100vh - 130px));
  max-width: calc(100vw - 40px);
  background: #000; border: 10px solid #1b2836; border-radius: 38px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  overflow: hidden; display: grid; place-items: center;
}
.essai-iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }

.essai-attente-modale { text-align: center; color: #6f8296; padding: 24px; }
.essai-attente-modale p { margin: 10px 0 0; font-size: 13.5px; }

.essai-rouet {
  width: 26px; height: 26px; display: block; margin: 0 auto;
  border: 3px solid rgba(255, 255, 255, .18); border-top-color: #2f8a5b;
  border-radius: 50%; animation: essai-tourne .9s linear infinite;
}
@keyframes essai-tourne { to { transform: rotate(360deg); } }

.essai-modale-note {
  font-size: 12.5px; color: #9fb0c0; margin: 0; text-align: center;
  max-width: 390px; min-height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .essai-rouet { animation-duration: 2.4s; }
  .slide-item[data-slug]:hover .slide-essayer { transform: translateX(-50%); }
}

@media (max-width: 430px) {
  .essai-modale { padding: 12px; }
  .essai-phone { border-width: 8px; border-radius: 28px; height: min(720px, calc(100vh - 118px)); }
}

/* ══ VISUELS PORTRAIT SUR FOND BLANC (04/09) ══════════════════════════════
   ⛔ REMPLACE le bloc « Visuels du slider de démonstration » plus haut, qui
   datait des captures en paysage sur bleu nuit. Les nouvelles captures sont
   des téléphones filmés sur BLANC : la carte ne doit plus être un rectangle
   coloré, sinon on verrait une boîte autour de chaque téléphone. Elle devient
   transparente, sans ombre, et le téléphone flotte dans le blanc de la
   section. La section passe donc au blanc pur, pour que la marge du GIF
   (255,255,255) se confonde exactement avec elle. */

.section-slider { background: #ffffff; }

.slide-item {
  width: min(272px, 62vw);
  aspect-ratio: auto;            /* la hauteur vient du contenu */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  /* Une grille d'une seule colonne : le visuel en haut, le libellé dessous.
     Le bouton « Essayer » partage la case du visuel, donc il se centre
     dessus et non sur la carte entière — sans quoi le libellé le décalerait. */
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  row-gap: 0;                    /* le bandeau est COLLÉ sous la vidéo */
}

.slide-media {
  grid-row: 1; grid-column: 1;
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 272 / 460;
  object-fit: contain;
  border-radius: 12px 12px 0 0;  /* le bas est fermé par le bandeau */
  /* ⚠ Une <video> pas encore chargée se peint en NOIR : sur une section
     blanche, cela ferait un rectangle sombre le temps du téléchargement. */
  background: #ffffff;
  display: block;
}

/* ⚠ Le bas de la vidéo coupe net l'ombre portée du châssis : sur du blanc, la
   rupture se voit. Un bandeau sombre, de la largeur du visuel et collé dessous,
   ferme la carte au lieu de laisser le blanc s'arrêter brutalement. */
.slide-item .slide-label {
  grid-row: 2; grid-column: 1;
  position: static;
  box-sizing: border-box;
  width: 100%;
  color: #ffffff;
  background: var(--color-text);
  backdrop-filter: none;
  padding: 10px 12px;
  border-radius: 0 0 12px 12px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  /* Deux lignes de haut pour TOUS les bandeaux : sinon les cartes dont le nom
     tient sur une ligne ont un bas plus haut que les autres, et la rangée
     paraît bancale. */
  min-height: calc(1.35em * 2 + 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-essayer {
  grid-row: 1; grid-column: 1;
  position: static;
  align-self: center;
  justify-self: center;
  transform: none;
  top: auto; left: auto; bottom: auto;
}

@media (hover: hover) and (pointer: fine) {
  .slide-essayer { transform: scale(.92); }
  .slide-item[data-slug]:hover .slide-essayer,
  .slide-item[data-slug]:focus-visible .slide-essayer { transform: scale(1); }
}

/* Sur tactile le bouton reste visible : on le pose bas sur le visuel plutôt
   qu'en plein centre, pour ne pas masquer l'écran de l'application. */
@media (hover: none), (pointer: coarse) {
  .slide-essayer {
    align-self: end;
    margin-bottom: 26px;
    transform: none;
    top: auto; bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide-item[data-slug]:hover .slide-media { transform: none; }
  .slide-essayer { transform: none; }
}

/* ══ MENU MOBILE — REFONTE (04/09) ════════════════════════════════════════
   ⛔ CE BLOC REMPLACE les règles « Menu mobile » plus haut. Quatre défauts
   constatés à l'écran sur un écran de 400 px :

   1. le panneau était à `rgba(47,138,91,.2)`, soit 20 % d'opacité : la photo du
      hero traversait et les liens étaient illisibles ;
   2. `.natura-mobile-menu-links` était en `display:flex` avec `flex:1` par
      lien : les cinq tenaient sur UNE ligne, « Pourquoi nous » se coupait en
      deux et une barre de défilement horizontale apparaissait ;
   3. le titre « Navigation Rapide » à 28 px en `white-space:nowrap` mangeait
      toute la largeur ;
   4. `border-bottom: 2px solid var(--neutral)` et
      `box-shadow: … var(--color)` : ces deux variables n'existent pas, les
      déclarations étaient donc ignorées — aucun filet de séparation.

   ⚠ Le panneau reste dans le flux quand il est `hidden` (il est seulement
   translaté de 150 %) : c'est ce qui donne l'animation de glissement. Ne pas
   le passer en `display:none`. */

@media screen and (max-width: 767px) {

  .natura-mobile-menu-button {
    box-shadow: 0 6px 18px rgba(20, 40, 30, .28);
    padding: 10px 18px;
    min-height: 44px;              /* cible tactile confortable */
    align-items: center;
  }

  .natura-mobile-menu {
    --x: 0;
    left: 10px;
    right: 10px;
    width: auto;
    bottom: 10px;
    /* ⭐ Opaque : c'est la correction principale. */
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(20, 40, 30, .28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: inherit;          /* Montserrat n'est pas chargée par le site */
    padding-bottom: 10px;
    overflow: hidden;
  }

  .natura-mobile-menu > *:not(:last-child) {
    border-bottom: 1px solid var(--color-line);
  }

  .natura-mobile-menu-header {
    padding: 12px 8px 12px 18px;
  }
  /* La loupe ne veut rien dire dans un menu de navigation. */
  .natura-mobile-menu-header label { display: none; }
  .natura-mobile-menu-header p {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    white-space: normal;
  }
  .natura-mobile-menu-header button {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 20px; line-height: 1;
    color: var(--color-text-soft);
  }
  .natura-mobile-menu-header button:active { background: var(--color-bg-alt); }

  /* ⭐ Un lien par ligne, 48 px de haut : le nom entier tient, et le doigt
     tombe juste. */
  .natura-mobile-menu-links {
    display: block;
    padding: 4px 0;
    overflow: visible;
  }
  .natura-mobile-menu-links a {
    display: flex;
    align-items: center;
    flex: none;
    text-align: left;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
  }
  .natura-mobile-menu-links a:active { background: var(--color-accent-soft); }

  .natura-mobile-menu-contact {
    width: auto;
    margin: 12px 14px 0;
    padding: 0;
    border-radius: 999px;
  }
  .natura-mobile-menu-contact a {
    display: block;
    padding: 14px 18px;
    text-align: center;
    font-size: 16px;
  }
}

/* ══ MOBILE : DÉTAILS RELEVÉS EN PARCOURANT LA PAGE (04/09) ═══════════════ */

/* ⚠ L'en-tête est `position: fixed` sur 64 px. Les liens internes sont déjà
   décalés par app.js, mais une URL ouverte directement sur `#tarifs` ne passe
   pas par ce code : le titre de section se retrouverait sous l'en-tête. */
section[id] { scroll-margin-top: 76px; }

@media screen and (max-width: 767px) {
  /* Cibles tactiles du pied de page : elles faisaient 22 px de haut. */
  .footer-links a {
    display: inline-block;
    padding: 11px 0;
    min-height: 44px;
    box-sizing: border-box;
  }
  .site-footer .logo { padding: 8px 0; }
}

/* ══ ICÔNES AU TRAIT (04/09) ══════════════════════════════════════════════
   ⛔ Les pictogrammes des sections et des mentions légales étaient des EMOJIS
   (📐 🇫🇷 🤖 📅 🏢 🔒 …). Un emoji change de dessin selon le système, ne prend
   pas la couleur du thème et donne un rendu de prototype. Remplacés par des
   SVG au trait, même grille de 24 et même épaisseur de 1,7 px que les icônes
   des applications de la vitrine. Ils héritent de `currentColor`. */

.ico { display: block; flex-shrink: 0; }

/* Posées en ligne, dans une phrase, un bouton ou une cellule de tableau. */
.ico-ligne {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 7px;
  color: var(--color-accent);
}

.btn .ico { display: inline-block; vertical-align: -4px; margin-right: 8px; }

.card-icon .ico,
.ml-article-icon .ico { display: block; }

/* ══ LE CHÂSSIS DE LA FENÊTRE D'ESSAI (04/09) ═════════════════════════════
   ⛔ Avant, DEUX châssis se superposaient : celui du site et celui dessiné par
   la coque du simulateur. En aplatissant celui de la coque pour que
   l'application affleure le cadre, j'ai supprimé du même coup l'encoche, le
   reflet et l'épaisseur — sur une application au fond clair, il ne restait
   plus rien qui ressemble à un téléphone. Le châssis est donc redessiné ICI,
   puisque c'est désormais le seul. */

.essai-phone {
  position: relative;
  padding: 12px;                 /* l'épaisseur du châssis */
  border: 0;
  border-radius: 46px;
  background:
    linear-gradient(158deg, #33445a 0%, #1b2836 38%, #0e161f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 26px 70px rgba(0, 0, 0, .58),
    0 3px 8px rgba(0, 0, 0, .45);
  overflow: visible;
}

/* L'application affleure le cadre, coins arrondis compris. */
.essai-phone > iframe,
.essai-phone .essai-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 34px;
  display: block;
  background: #000;
}

/* L'encoche. Posée au-dessus de l'application, jamais cliquable. */
.essai-phone::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 21px;
  background: #0b1017;
  border-radius: 0 0 13px 13px;
  pointer-events: none;
}

/* Le reflet en diagonale sur la vitre. */
.essai-phone::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 12px;
  border-radius: 34px;
  pointer-events: none;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, .14) 0%,
    rgba(255, 255, 255, .04) 24%,
    rgba(255, 255, 255, 0) 44%);
}

/* Le message d'attente ne doit pas laisser voir le dégradé du châssis. */
.essai-attente-modale {
  border-radius: 34px;
  background: #0b1017;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Sous 420 px, le châssis s'affine pour ne pas manger l'écran. */
@media screen and (max-width: 420px) {
  .essai-phone { padding: 9px; border-radius: 38px; }
  .essai-phone > iframe, .essai-phone .essai-iframe,
  .essai-phone::after { border-radius: 29px; }
  .essai-phone::after { inset: 9px; }
  .essai-phone::before { top: 9px; width: 88px; height: 18px; }
}