/* Section 10 support (#accompagnement), owner S3 — design v5 sections/10-support.html. Board, notes and pins are the
   shared .mc-… classes of site.css; this file sets the two columns, the zigzag of the notes, their tilts and the
   dashed path. */

.support-layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 72px);
  align-items: flex-start;
}
.support-head { flex: 1 1 320px; min-width: 0; }
.support-head__intro {
  margin: 16px 0 0;
  max-width: 380px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--mc-text);
  text-wrap: pretty;
}

.support-board {
  flex: 1.6 1 480px;
  min-width: 0;
  padding: clamp(44px, 5vw, 64px) clamp(16px, 4vw, 48px);
}

/* Dashed path from note to note (design: only from 760px wide). */
.support-board__path {
  position: absolute;
  inset: 8% 14%;
  width: 72%;
  height: 84%;
  overflow: visible;
  pointer-events: none;
}

.support-notes {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.support-notes > .mc-note { width: min(100%, 360px); align-self: flex-start; }
.support-notes > .mc-note:nth-child(even) { align-self: flex-end; }
/* The design overlaps the notes by up to 56px (clamp(-56px, calc(30px - 6vw), 28px)), which hides the last line of
   a note under the next one when its text is long (English). Up to 28px only covers the note's bottom padding. */
.support-notes > .mc-note + .mc-note { margin-top: clamp(-28px, calc(30px - 6vw), 28px); }
.support-notes > .mc-note:nth-child(1) .mc-note__card { --mc-tilt: -2.4deg; }
.support-notes > .mc-note:nth-child(2) .mc-note__card { --mc-tilt: 2.2deg; }
.support-notes > .mc-note:nth-child(3) .mc-note__card { --mc-tilt: -1.6deg; }
.support-notes > .mc-note:nth-child(4) .mc-note__card { --mc-tilt: 1.8deg; }

@media (max-width: 759.98px) {
  .support-board__path { display: none; }
}