/*
 * Le parcours « séance d'information » habillé au thème du site (Publii, N-Tech) :
 * ses variables (--primary-color, --text-color, --body-font), ses champs (fond blanc,
 * filet #e3e3e3, rayon 2 px, focus noir), ses boutons (bleu plein, rayon 3 px, ombre
 * douce), ses encadrés (.msg : filet gauche). Tout est sous .sf : le thème stylise
 * TOUS les <button> en bouton bleu, il faut donc reprendre la main sur chacun.
 */
.sf {
  --sf-primary: var(--primary-color, #4488b9);
  --sf-primary-tint: rgba(var(--bg-color, 68, 136, 185), 0.08);
  --sf-text: var(--text-color, #000);
  --sf-muted: #5c5c63;
  --sf-rule: #e3e3e3;
  --sf-surface: #f6f8fb;
  --sf-bad: #c8102e;
  margin: 1.6rem 0 2.4rem;
  font-family: var(--body-font);
  color: var(--sf-text);
}

.sf [hidden] { display: none !important; }

/* Progression */
.sf .sf-progress { display: flex; gap: 6px; margin-bottom: 2.4rem; }
.sf .sf-progress__bar { flex: 1; height: 4px; background: var(--sf-rule); border-radius: 2px; transition: background .24s ease; }
.sf .sf-progress__bar--active { background: var(--sf-primary); }

/* Repli : la page du serveur, en lien (encadré .msg du thème) */
.sf .sf-fallback { margin-bottom: 1.6rem; padding: 1.0666666667rem 1.6rem; background: #f0f7ff; border-left: 2px solid #0070f0; font-size: .9rem; }
.sf .sf-fallback a { color: var(--sf-text); font-weight: 700; }

.sf .sf-step--active { animation: sfFadeIn .24s ease; }
@keyframes sfFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sf .sf-question { font-size: 1.25rem; font-weight: var(--headings-weight, 700); line-height: var(--headings-line-height, 1.3); margin: 0 0 1.2rem; }

/* Cartes de choix (public, modalité, jour) */
.sf .sf-options { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.6rem; }
.sf button.sf-opt {
  display: block; width: 100%; text-align: left; margin: 0;
  background: #fff; color: var(--sf-text);
  border: 1px solid var(--sf-rule); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  padding: 1.0666666667rem 1.3333333333rem;
  font-family: var(--body-font); font-size: 1rem; line-height: 1.4;
  transition: border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
.sf button.sf-opt:hover, .sf button.sf-opt:focus-visible {
  border-color: var(--sf-primary); color: var(--sf-text);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .08);
}
.sf button.sf-opt--selected { border-color: var(--sf-primary); box-shadow: inset 0 0 0 1px var(--sf-primary); background: var(--sf-primary-tint); }
.sf .sf-opt__label { display: block; font-weight: 700; }
.sf .sf-opt__sub { display: block; margin-top: .2rem; font-size: .875rem; font-weight: 400; color: var(--sf-muted); }

/* Conseiller (encadré .msg) */
.sf .sf-conseiller { display: flex; align-items: center; gap: 1.0666666667rem; margin-bottom: 1.6rem; padding: 1.0666666667rem 1.6rem; background: var(--sf-surface); border-left: 2px solid var(--sf-primary); }
.sf .sf-conseiller p { margin: 0; }
.sf .sf-conseiller__avatar { flex: none; width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; background: #fff; }
.sf .sf-conseiller__label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted); }
.sf .sf-conseiller__name { font-size: 1.1rem; font-weight: 700; }
.sf .sf-conseiller__role { font-size: .875rem; color: var(--sf-muted); }

/* Semaine */
.sf .sf-week { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.sf .sf-week__label { flex: 1; text-align: center; font-weight: 700; font-size: .95rem; }
.sf button.sf-week__prev, .sf button.sf-week__next {
  width: 2.6rem; height: 2.6rem; padding: 0; margin: 0;
  background: #fff; color: var(--sf-text); border: 1px solid var(--sf-rule); border-radius: 3px; box-shadow: none;
  font-size: 1.4rem; line-height: 1;
}
.sf button.sf-week__prev:hover, .sf button.sf-week__next:hover { border-color: var(--sf-primary); color: var(--sf-primary); box-shadow: none; }
.sf button.sf-week__prev:disabled, .sf button.sf-week__next:disabled { opacity: .35; cursor: not-allowed; border-color: var(--sf-rule); color: var(--sf-text); }

.sf .sf-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; margin-bottom: 1.6rem; }
.sf .sf-dates button.sf-opt { text-align: center; padding: .8rem; }
.sf .sf-dates .sf-opt__label { font-size: .95rem; }
.sf .sf-dates .sf-opt__label::first-letter { text-transform: uppercase; }
.sf .sf-dates .sf-opt__sub { font-size: .8rem; }

/* Horaires */
.sf .sf-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .6rem; margin-bottom: 1.6rem; }
.sf button.sf-slot {
  width: 100%; margin: 0; padding: .6rem .4rem;
  background: #fff; color: var(--sf-text); border: 1px solid var(--sf-rule); border-radius: 3px; box-shadow: none;
  font-family: var(--body-font); font-size: 1rem; font-weight: 700; text-align: center;
}
.sf button.sf-slot:hover { border-color: var(--sf-primary); color: var(--sf-primary); box-shadow: none; }
.sf button.sf-slot--selected, .sf button.sf-slot--selected:hover { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; }

.sf .sf-context { margin: 0 0 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--sf-rule); font-size: .95rem; color: var(--sf-muted); }
.sf .sf-context::first-letter { text-transform: uppercase; }
.sf .sf-notice { margin-bottom: 1rem; }
.sf .sf-notice:empty { display: none; }

/* Formulaire : les champs du thème */
.sf .sf-form { margin: 0; }
.sf .sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.0666666667rem; }
.sf .sf-field { margin-bottom: 1.2rem; }
.sf .sf-label { display: block; margin: 0 0 .4rem; font-size: .9rem; font-weight: 700; }
.sf .sf-input, .sf .sf-select {
  display: block; width: 100%; box-sizing: border-box;
  background: #fff; color: var(--sf-text); border: 1px solid var(--sf-rule); border-radius: 2px;
  padding: .6rem .8rem; font-family: var(--body-font); font-size: 1rem; line-height: 1.4;
  transition: border-color .24s ease;
}
.sf .sf-input:focus, .sf .sf-select:focus { outline: 0; border-color: #000; }
.sf .sf-input::placeholder, .sf .sf-input:focus::placeholder { color: #9a9aa1 !important; opacity: 1; }
.sf .sf-input--error { border-color: var(--sf-bad) !important; }
.sf .sf-textarea { resize: vertical; min-height: 5.5rem; }
.sf .sf-error { margin-top: .3rem; font-size: .875rem; color: var(--sf-bad); }
.sf .sf-error__id { margin-left: .5rem; font-size: .75rem; font-family: ui-monospace, Menlo, monospace; color: var(--sf-muted); }

.sf .sf-child { margin: .4rem 0 1.2rem; padding: 1.0666666667rem 1.3333333333rem .2rem; background: var(--sf-surface); border-left: 2px solid var(--sf-primary); }
.sf .sf-child__title { margin: 0 0 .8rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted); }

/* Les conditions, au-dessus du bouton */
.sf .sf-terms { margin-top: .4rem; padding: 1.0666666667rem 1.3333333333rem; background: var(--sf-surface); font-size: .875rem; line-height: 1.6; }
.sf .sf-terms:empty { display: none; }
.sf .sf-terms__lines { margin: 0; padding-left: 1.1rem; }
.sf .sf-terms__lines li + li { margin-top: .25rem; }
.sf .sf-mentions { margin: .8rem 0 0; font-size: .8rem; color: var(--sf-muted); }

.sf .sf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }

/* Bouton principal : le .btn du thème */
.sf button.sf-btn--primary { width: auto; margin: 0; padding: .7rem 1.6rem; font-size: .95rem; }
.sf button.sf-btn--primary:disabled { background: #c9ccd1; border-color: #c9ccd1; box-shadow: none; cursor: not-allowed; }

/* Retour : un lien, pas un bouton */
.sf button.sf-back {
  width: auto; margin: 0; padding: .4rem 0;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  color: var(--sf-muted); font-size: .95rem; font-weight: 400;
}
.sf button.sf-back:hover, .sf button.sf-back:focus { background: none; box-shadow: none; color: var(--link-color, #ec1037); }

/* Chargement, vide */
.sf .sf-loading, .sf .sf-empty { padding: 2rem 0; text-align: center; font-size: .95rem; color: var(--sf-muted); }
.sf .sf-loading::after {
  content: ''; display: inline-block; width: 1rem; height: 1rem; margin-left: .5rem; vertical-align: middle;
  border: 2px solid var(--sf-rule); border-top-color: var(--sf-primary); border-radius: 50%; animation: sfSpin .6s linear infinite;
}
@keyframes sfSpin { to { transform: rotate(360deg); } }

/* Confirmation */
.sf .sf-confirm { text-align: center; padding: 1.6rem 0; }
.sf .sf-confirm__icon { width: 3.2rem; height: 3.2rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--sf-primary); color: #fff; font-size: 1.6rem; line-height: 3.2rem; }
.sf .sf-confirm__title { margin: 0 0 .8rem; }
.sf .sf-confirm__text { margin: 0 0 1.2rem; }
.sf .sf-confirm__recap { margin: 0 auto 1rem; max-width: 30rem; padding: 1.0666666667rem 1.6rem; text-align: left; background: var(--sf-surface); border-left: 2px solid var(--sf-primary); font-size: .95rem; line-height: 1.6; }
.sf .sf-recap__label { margin-bottom: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted); }
.sf .sf-confirm__email { font-size: .95rem; color: var(--sf-muted); }

@media (max-width: 40em) {
  .sf .sf-row { grid-template-columns: 1fr; }
  .sf .sf-actions { flex-direction: column-reverse; align-items: stretch; }
  .sf button.sf-btn--primary { width: 100%; }
  .sf button.sf-back { text-align: center; }
}