/* The syncshell page: join the shell, then make yourself light enough to be
   worth loading.

   Written to be linked, not browsed. A sync manager hands out one address and
   the person lands on the exact step they need, so every step carries its own
   anchor and the tabs remember which plugin was chosen. */

.sy {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
}

/* ── head ─────────────────────────────────────────────────────────── */
.sy-head {
  text-align: center;
  margin-bottom: 3rem;
}

.sy-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red-light);
  margin-bottom: 0.9rem;
}

.sy-title {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.sy-title span { color: var(--red-light); }

.sy-lede {
  max-width: 46rem;
  margin: 1.2rem auto 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* ── the shell itself ─────────────────────────────────────────────── */
.sy-join {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.sy-cred {
  background: var(--raised);
  border: 1px solid var(--border-red);
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
}

.sy-cred-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.sy-cred-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.sy-cred-value {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-all;
}

.sy-copy {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-red);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  cursor: pointer;
  transition: var(--transition);
}

.sy-copy:hover { border-color: var(--red-light); color: var(--text-main); }
.sy-copy.done { border-color: var(--red-light); color: var(--red-light); }

.sy-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 3.5rem;
}

/* ── why bother ───────────────────────────────────────────────────── */
.sy-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 3.5rem;
}

.sy-target {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem;
}

.sy-target-num {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--red-light);
  line-height: 1;
  margin-bottom: 0.45rem;
}

.sy-target-what {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.sy-target-why {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── tabs ─────────────────────────────────────────────────────────── */
.sy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.9rem 0;
  background: linear-gradient(to bottom, var(--bg) 70%, transparent);
}

.sy-tab {
  background: transparent;
  border: 1px solid var(--border-red);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  cursor: pointer;
  transition: var(--transition);
}

.sy-tab:hover { color: var(--text-main); }

.sy-tab.on {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.sy-guide { display: none; }
.sy-guide.on { display: block; }

.sy-guide-intro {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border-red);
}

/* ── steps ────────────────────────────────────────────────────────── */
.sy-step {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.4rem;
  padding-bottom: 3rem;
  scroll-margin-top: 5rem;
}

.sy-step-num {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--red-light);
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid var(--border-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sy-step-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
}

.sy-step-body {
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 0.95rem;
}

.sy-step-body p + p { margin-top: 0.9rem; }
.sy-step-body strong { color: var(--text-main); font-weight: 600; }

.sy-step-body code {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--red-subtle);
  border: 1px solid var(--border-red);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
  font-size: 0.86em;
  color: var(--text-main);
}

.sy-warn {
  margin-top: 1rem;
  border-left: 2px solid var(--red);
  background: var(--red-subtle);
  border-radius: 0 10px 10px 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.65;
}

.sy-shots {
  display: flex;
  flex-wrap: wrap;
  /* Sans ceci, deux captures cote a cote sont etirees a la hauteur de la plus
     grande : c'est le comportement par defaut de flexbox, et sur une image ca
     se voit tout de suite. */
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 1.2rem;
}

.sy-shots img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
  cursor: zoom-in;
  transition: var(--transition);
}

.sy-shots img:hover { border-color: var(--border-red); }
.sy-shots-2 img {
  flex: 0 1 auto;
  width: auto;
  max-width: calc(50% - 0.5rem);
}

@media (max-width: 720px) {
  .sy-shots-2 img { max-width: 100%; }
}

/* ── credit and rules ─────────────────────────────────────────────── */
.sy-credit {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.sy-credit a { color: var(--red-light); text-decoration: none; }
.sy-credit a:hover { text-decoration: underline; }

.sy-rules {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.sy-rules h2 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.sy-rules-lede {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

/* Les regles en panneaux : le titre suffit a ceux qui les connaissent deja,
   et le detail est la pour ceux qui decouvrent. Huit encarts pleins se
   sautaient d'un bloc ; huit lignes se lisent. */
.sy-rule-list {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--glass);
}

.sy-rule + .sy-rule { border-top: 1px solid var(--border); }

.sy-rule > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-main);
  transition: var(--transition);
}

.sy-rule > summary::-webkit-details-marker { display: none; }
.sy-rule > summary:hover { background: var(--red-subtle); }

.sy-rule-mark {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  opacity: 0.55;
  transition: var(--transition);
}

.sy-rule[open] .sy-rule-mark { opacity: 1; box-shadow: 0 0 0 4px var(--red-subtle); }

.sy-rule-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sy-rule[open] .sy-rule-chevron { transform: rotate(180deg); }

.sy-rule > div {
  padding: 0 1.3rem 1.2rem 3.2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.sy-rule > div strong { color: var(--text-main); font-weight: 600; }

/* ── lightbox ─────────────────────────────────────────────────────── */
.sy-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 2rem;
  cursor: zoom-out;
}

.sy-lightbox.on { display: flex; }

.sy-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}

@media (max-width: 640px) {
  .sy { padding: 2.5rem 1rem 4rem; }
  .sy-step { grid-template-columns: 1fr; gap: 0.8rem; }
  .sy-step-num { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
}