/* /salon — « Suivre Ékole » (Salon national de l'éducation 2026). Shared by the form,
   /salon/confirmer/ and /salon/desabonne/. Site tokens come from /assets/styles.css. */

.salon-hero { padding: 56px 0 28px; }
.salon-hero h1 { font-size: clamp(40px, 8.5vw, 84px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 18px; }
.salon-hero h1 em { font-style: italic; color: var(--c-blue); }
.salon-hero .lede { font-size: 18px; color: var(--ink-mute); max-width: 640px; }
.salon-strip { display: grid; grid-template-columns: repeat(5, 1fr); height: 5px; border-radius: 3px; overflow: hidden; max-width: 220px; margin: 0 0 22px; }
.salon-strip i:nth-child(1) { background: var(--c-blue); }
.salon-strip i:nth-child(2) { background: var(--c-red); }
.salon-strip i:nth-child(3) { background: var(--c-yellow); }
.salon-strip i:nth-child(4) { background: var(--c-sky); }
.salon-strip i:nth-child(5) { background: var(--c-green); }

.salon-body { padding: 20px 0 90px; }
.salon-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; }
.salon-grid > * { min-width: 0; }

/* ---------- form ---------- */
form.follow-form { display: flex; flex-direction: column; gap: 22px; }
.salon-body .submit-btn { color: #07090E; } /* dark ink on yellow in both themes */
.salon-body .submit-btn:hover { color: var(--bg-0); }
.salon-body .submit-btn[disabled] { opacity: .6; transform: none; cursor: progress; }

.q { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.q legend {
  padding: 0; margin-bottom: 12px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.q legend .q-num { color: var(--c-blue); margin-right: 6px; }
.q legend .q-opt { text-transform: none; letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 15px; line-height: 1.2; color: var(--ink); cursor: pointer; user-select: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip:hover { border-color: var(--ink-mute); }
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg-0); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }

.team-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 8px 14px; border-radius: 999px; background: var(--bg-1);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-mute);
}
.team-badge strong { color: var(--ink); }

.follow-status { font-family: var(--f-mono); font-size: 12px; letter-spacing: .05em; min-height: 1.3em; margin: -6px 0 0; }
.follow-status.err { color: var(--c-red); }
.follow-status.info { color: var(--ink-mute); }
.follow-legal { font-size: 13px; line-height: 1.55; color: var(--ink-mute); max-width: 600px; }
.follow-legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- result panels (form done, confirm, unsubscribe) ---------- */
.panel { border: 1px solid var(--line-2); border-radius: 18px; padding: 28px; display: grid; gap: 14px; }
.panel h2 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.02em; margin: 0; }
.panel p { color: var(--ink-mute); margin: 0; }
.panel p strong { color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; }
.cta-row a, .cta-row button {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.cta-row a:hover, .cta-row button:hover { transform: translateY(-2px); }
.cta-primary { background: var(--c-yellow); color: #07090E; border: 0; }
.cta-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.again { justify-self: start; background: transparent; color: var(--ink-mute); border: 0; padding: 0; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- aside ---------- */
.aside-title { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 16px; }
.proof { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 16px; }
.proof li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: baseline; color: var(--ink-mute); font-size: 16px; line-height: 1.5; }
.proof li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--c-blue)); transform: translateY(-1px); }
.proof strong { color: var(--ink); font-weight: 600; }
.salon-note { font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; }

html[lang="en"] .only-fr, html[lang="fr"] .only-en { display: none !important; }

@media (max-width: 860px) {
  .salon-grid { grid-template-columns: 1fr; gap: 48px; }
  .salon-hero { padding: 32px 0 12px; }
  .salon-hero .lede { font-size: 17px; }
  .panel { padding: 22px; }
}