/* Page « Mettre l'agenda sur mon site » (templates/pages/simple/integrer*.php). Jetons seulement. */
.sint { display: grid; gap: var(--space-6); margin-bottom: var(--space-8); }
@media (min-width: 62rem) {
    .sint { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }
    .sint__preview { position: sticky; top: var(--space-4); }
}
.sint__form { display: grid; gap: var(--space-4); }
.sint fieldset { margin: 0; padding: var(--space-4); border: 1px solid var(--color-border-card); border-radius: var(--radius-lg); background: var(--color-surface); min-width: 0; }
.sint legend { padding: 0 var(--space-2); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text-muted); }
.sint__choices { display: grid; gap: var(--space-2); }
.sint__choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.sint__choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.sint__choice input { margin-top: 0.3em; accent-color: var(--color-accent); }
.sint__choice span { display: flex; flex-direction: column; }
.sint__choice small { color: var(--color-text-muted); }
.sint__range { display: flex; align-items: center; gap: var(--space-3); }
.sint__range input { flex: 1; accent-color: var(--color-accent); }
.sint__range output { min-width: 2.5ch; font-weight: 800; text-align: right; }
.sint__colour { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; }
.sint__colour label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.sint__colour input[type="color"] { width: 3rem; height: 2.25rem; padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); }
.sint__colour input[type="color"]:disabled { opacity: 0.35; }
.sint__colour select, .sint__field select { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); font: inherit; }
.sint__check { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; font-weight: 600; cursor: pointer; }
.sint__check input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--color-accent); }
.sint__field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); font-weight: 600; }

.sint__previewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.sint__previewbar h2 { margin: 0; font-size: 1.25rem; }
.sint__widths { display: flex; gap: var(--space-2); }
.sint__widths .sbtn { min-height: 36px; padding: 0 14px; }
.sint__widths [aria-pressed="true"] { background: var(--color-accent); color: var(--color-ground); }
.sint__stage { max-width: 100%; margin: 0; padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); overflow: auto; }
/* Le thème sombre se juge sur un fond sombre, comme sur le site de la salle. */
.sint__stage[data-theme="sombre"] { background: var(--color-slate-night); }

.sint__code h2 { font-size: 1.375rem; margin: var(--space-7) 0 var(--space-3); }
.sint__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.sint__tab { min-height: 44px; padding: 0 18px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); font: inherit; font-weight: 700; cursor: pointer; }
.sint__tab[aria-selected="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-ground); }
.sint__panel p { max-width: 46rem; }
.sint__box { width: 100%; max-width: 60rem; padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.5; resize: vertical; }
.sint__where { margin: var(--space-5) 0; max-width: 46rem; }
.sint__where summary { cursor: pointer; font-weight: 700; }
.sint__where ul { margin: var(--space-3) 0 0; padding-left: 1.25rem; }
.sint__where li { margin-bottom: var(--space-2); }

.sint__steps { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); counter-reset: etape; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.sint__steps li { counter-increment: etape; display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border: 1px solid var(--color-border-card); border-radius: var(--radius-lg); background: var(--color-surface); }
.sint__steps li::before { content: counter(etape); font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: var(--color-accent-text); }
.sint__steps span { color: var(--color-text-2); }