/* ==========================================================
   Valeurs : trois rayons partant d'un même soleil
   ========================================================== */
.values { overflow: hidden; }
.values::before { /* soleil couchant en filigrane */
  content: ""; position: absolute; right: -12vw; top: 50%; width: 46vw; aspect-ratio: 1; transform: translateY(-50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--glow), transparent 68%);
}
.rays-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ray {
  position: relative; padding: 28px 24px 26px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; gap: 10px; align-content: start;
}
.ray .glyph {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; color: #fff8ef;
  background: radial-gradient(circle at 40% 35%, var(--honey), var(--sun));
  box-shadow: 0 0 0 6px var(--glow);
}
.ray h3 { font-size: 1.35rem; }
.ray p { color: var(--ink-soft); font-size: .98rem; }

.promise {
  position: relative; margin-top: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(24px, 4vw, 56px); align-items: center;
}
.promise blockquote {
  margin: 0; font-family: var(--f-display); font-weight: 500;
  font-size: var(--step-2); line-height: 1.35;
}
.promise blockquote em { font-style: normal; color: var(--sun); }
.promise .label { display: block; margin-bottom: 14px; }
.promise figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; box-shadow: var(--shadow); cursor: zoom-in; }
.promise figure img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .rays-grid, .promise { grid-template-columns: minmax(0, 1fr); }
}