/* =====================================================================
   store.css — composants specifiques au site marchand 1asso1site.
   Complete les CSS communes (tokens/layout/components/admin) heritees du
   moteur 1asso1site-core.
   ===================================================================== */

/* ------------------------- Header / Brand ------------------------- */
.site__header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); height: var(--header-h);
}
.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: var(--fg-strong);
}
.brand__logo {
  width: 38px; height: 38px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-bleu-700), var(--c-accent2-700));
  color: var(--c-blanc); font-family: var(--font-serif);
  font-weight: var(--fw-bold); font-size: 1.2rem;
  box-shadow: var(--shadow-sm);
}
.brand__title { display: flex; flex-direction: column; line-height: 1.1; }
.brand__main {
  font-family: var(--font-serif); font-weight: var(--fw-semibold);
  font-size: var(--fs-md); color: var(--fg-strong);
  letter-spacing: var(--ls-tight);
}
.brand__sub {
  font-size: var(--fs-xs); color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
}

.nav { display: flex; align-items: center; gap: var(--sp-5); }
.nav a {
  color: var(--fg); text-decoration: none; font-size: var(--fs-sm);
  font-weight: var(--fw-medium); padding: var(--sp-2) var(--sp-1);
  border-bottom: 2px solid transparent; transition: all var(--t-fast);
}
.nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav a.is-active { color: var(--accent-strong); border-bottom-color: var(--accent); }
.nav__cta {
  background: var(--accent); color: var(--c-blanc) !important;
  padding: var(--sp-2) var(--sp-4) !important;
  border-radius: var(--radius-pill); border: 0 !important;
}
.nav__cta:hover { background: var(--accent-strong); border-bottom-color: transparent !important; }

/* La nav desktop disparait au meme breakpoint que le moteur (860px),
   le burger prend le relais (defini ligne 240 de layout.css). */
@media (max-width: 860px) {
  .nav { display: none; }
  .brand__sub { display: none; }
}

/* ------------------------- Hero ------------------------- */
.hero {
  padding: clamp(3rem, 8vw, var(--sp-10)) 0 clamp(3rem, 6vw, var(--sp-8));
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 60% at 15% 20%, var(--c-bleu-050) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 80%, var(--c-accent2-050) 0%, transparent 60%);
  opacity: 0.7;
}
.hero__inner {
  text-align: left;
  max-width: 760px;
}
.hero__kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent-alt);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  background: var(--accent-alt-soft);
  border-radius: var(--radius-pill);
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-strong);
  margin-bottom: var(--sp-5);
}
.hero__lead {
  font-size: var(--fs-md);
  max-width: 640px;
  color: var(--fg);
  line-height: 1.6;
}
.hero__lead p {
  margin-bottom: var(--sp-3);
}
.hero__lead p:last-child {
  margin-bottom: 0;
}
.hero__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}
.hero__note {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-top: var(--sp-5);
  letter-spacing: 0.02em;
}

/* ------------------------- Sections ------------------------- */
.section {
  padding: var(--sp-8) 0;
}
.section + .section {
  /* Eviter le double padding entre 2 sections consecutives */
  padding-top: 0;
}
.section--accent + .section,
.section + .section--accent {
  padding-top: var(--sp-8);
}
.section__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-6);
  color: var(--fg-strong);
  text-align: center;
  letter-spacing: var(--ls-tight);
}
.section--accent {
  background: var(--c-creme);
}

.cards {
  display: grid;
  gap: var(--sp-5);
}
.cards--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Override des cards de la home : plus de presence, hover marque,
   subtle border-top accent qui rappelle les couleurs marque. */
.section .cards--3 .card {
  position: relative;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.section .cards--3 .card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-bleu-700), var(--c-accent2-700));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.section .cards--3 .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.section .cards--3 .card__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}

/* ------------------------- Page hero (titres pages secondaires) ------------------------- */
.page-hero {
  padding: var(--sp-8) 0 var(--sp-6);
  background: linear-gradient(180deg, var(--c-ivoire) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-7);
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: clamp(2rem, 4vw, var(--fs-3xl));
  color: var(--fg-strong);
  margin-bottom: var(--sp-3);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.page-hero--small {
  padding: var(--sp-7) 0 var(--sp-5);
  margin-bottom: var(--sp-6);
}
.page-hero--small h1 {
  font-size: clamp(1.5rem, 3vw, var(--fs-2xl));
}
.page-hero__lead {
  max-width: 640px;
  font-size: var(--fs-md);
  color: var(--fg);
  line-height: 1.6;
}
/* Quand .page-hero est suivie d'une .section, supprimer le padding-top
   double pour conserver un rythme propre. */
.page-hero + .section {
  padding-top: 0;
}

/* ------------------------- CTA band ------------------------- */
.cta-band {
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  background:
    radial-gradient(ellipse at top left, var(--c-bleu-050) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, var(--c-accent2-050) 0%, transparent 60%),
    var(--c-ivoire);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.cta-band__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.5rem, 3vw, var(--fs-2xl));
  color: var(--fg-strong);
  margin-bottom: var(--sp-3);
  letter-spacing: var(--ls-tight);
}
.cta-band__lead {
  color: var(--fg);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-md);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.cta-band .hero__actions {
  justify-content: center;
  margin-top: 0;
}

.demo-section {
  text-align: center;
}
.demo-section .prose {
  max-width: 640px;
  margin: 0 auto var(--sp-5);
}

/* ------------------------- Tarifs : price cards ------------------------- */
.prices {
  align-items: stretch;
  margin-top: var(--sp-3);
}
.price-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.price-card--primary {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow:
    var(--shadow-md),
    0 0 0 4px var(--accent-soft);
  background:
    linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-surface) 60%);
}
.price-card--primary:hover {
  border-color: var(--accent-strong);
  box-shadow:
    var(--shadow-lg),
    0 0 0 4px var(--accent-soft);
}
.price-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--c-blanc);
  padding: 0.3em var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.price-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-1);
  letter-spacing: var(--ls-tight);
}
.price-card__pitch {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
  line-height: 1.5;
}
.price-card__price {
  margin: var(--sp-3) 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.price-card__amount {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4vw, var(--fs-3xl));
  font-weight: var(--fw-bold);
  color: var(--accent-strong);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}
.price-card__unit {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.price-card__aside {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-bottom: var(--sp-5);
  font-style: italic;
}
.price-card__desc {
  flex: 1;
  margin-bottom: var(--sp-6);
}
.price-card__desc ul {
  padding-left: var(--sp-4);
  margin: 0;
}
.price-card__desc li {
  margin-bottom: var(--sp-2);
  color: var(--fg);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.price-card .btn {
  align-self: stretch;
  text-align: center;
}

.notes { margin-top: var(--sp-7); }
.notes h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.notes ul { padding-left: var(--sp-5); }
.notes li { margin-bottom: var(--sp-2); color: var(--fg); }

/* ------------------------- Footer ------------------------- */
.site__footer {
  margin-top: var(--sp-8);
  background: var(--c-encre-900); color: var(--c-gris-300);
  padding: var(--sp-7) 0 var(--sp-5);
}
.site__footer .container { padding-block: 0; }
.footer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-6) var(--sp-5);
}
.footer__tagline {
  font-family: var(--font-serif); font-size: var(--fs-xl);
  color: var(--c-blanc); line-height: 1.1;
  display: flex; flex-direction: column;
}
.footer__about { color: var(--c-gris-300); margin-top: var(--sp-2); font-size: var(--fs-sm); }
.footer__h2 {
  color: var(--c-blanc); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  margin-bottom: var(--sp-3);
}
.footer__nav h2 {
  color: var(--c-blanc); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  margin-bottom: var(--sp-3);
}
.footer__nav { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__nav a { color: var(--c-gris-300); text-decoration: none; font-size: var(--fs-sm); }
.footer__nav a:hover { color: var(--c-blanc); }
.footer__bottom {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--c-gris-300);
}

/* ------------------------- Tunnel de commande ------------------------- */
.progress {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.progress__step {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-subtle); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); color: var(--fg-muted);
  border: 1px solid var(--border);
}
.progress__step.is-current {
  background: var(--accent); color: var(--c-blanc); border-color: var(--accent);
  font-weight: var(--fw-semibold);
}
.progress__step.is-done {
  background: var(--c-accent2-050); color: var(--c-accent2-700);
  border-color: var(--c-accent2-200);
}
.progress__num {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-weight: var(--fw-bold); font-size: var(--fs-xs);
}
.progress__step.is-current .progress__num { background: rgba(255,255,255,0.2); }

.email-input {
  display: flex; align-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-surface); overflow: hidden;
}
.email-input input {
  border: 0; padding: var(--sp-3); flex: 1; font-size: var(--fs-base);
  background: transparent;
}
.email-input input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.email-input__suffix {
  padding: var(--sp-3); background: var(--bg-subtle);
  color: var(--fg-muted); border-left: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--fs-sm);
}

.radio-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--sp-5);
}
.radio-card {
  display: block; padding: var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--t-fast);
  background: var(--bg-surface);
}
.radio-card:hover { border-color: var(--accent); }
.radio-card input { margin-right: var(--sp-2); }
.radio-card__label { font-weight: var(--fw-medium); }
.radio-card:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}

.formule-options,
.choice-cards { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.formule-card,
.choice-card {
  display: block; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-surface); transition: all var(--t-fast);
}
.formule-card:hover,
.choice-card:hover { border-color: var(--accent); }
.formule-card input,
.choice-card input { display: none; }
.formule-card__inner { padding: var(--sp-5); }
.choice-card { padding: var(--sp-5); }
.formule-card:has(input:checked),
.choice-card:has(input:checked),
.choice-card.is-selected {
  border-color: var(--accent); border-width: 2px;
  background: var(--accent-soft);
}
.choice-card__title {
  display: block;
  font-family: var(--font-serif); font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2); color: var(--fg-strong);
}
.choice-card__badge {
  display: inline-block; margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  font-size: var(--fs-xs); font-family: var(--font-sans); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  background: var(--accent); color: var(--c-blanc);
  border-radius: var(--radius-pill);
  vertical-align: middle;
}
.choice-card__price {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.choice-card__price strong { color: var(--accent-strong); font-size: var(--fs-md); }
.choice-card__desc {
  display: block; color: var(--fg);
  font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.formule-card__title {
  font-family: var(--font-serif); font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
}
.formule-card__price strong {
  font-size: var(--fs-xl); color: var(--accent-strong);
}
.formule-card__aside {
  display: block; font-size: var(--fs-xs); color: var(--fg-muted);
  margin-top: var(--sp-1);
}

.recap {
  margin: var(--sp-6) 0;
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-3) var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.recap dt {
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}
.recap dd {
  color: var(--fg-strong);
  margin: 0;
  font-size: var(--fs-sm);
}
.recap dd code {
  font-size: 0.95em;
  background: var(--bg-subtle);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}
.recap__total {
  grid-column: 1;
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-strong);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  align-self: end;
}
.recap__total-value {
  grid-column: 2;
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-strong);
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--accent-strong);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

.legal-note {
  font-size: var(--fs-xs); color: var(--fg-muted);
  margin-top: var(--sp-4); text-align: center;
}

.cta-inline {
  margin-top: var(--sp-6);
  padding: var(--sp-4); background: var(--accent-soft);
  border-radius: var(--radius-md); text-align: center;
}

/* ------------------------- Alertes ------------------------- */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: var(--sp-4);
}
.alert--success {
  background: var(--c-accent2-050); color: var(--c-accent2-900);
  border-color: var(--c-accent2-200);
}
.alert--error { background: #fdf3f3; color: var(--danger); border-color: #f4cccc; }
.alert--info { background: var(--c-bleu-050); color: var(--c-bleu-900); border-color: var(--c-bleu-200); }

.muted { color: var(--fg-muted); }

.grid-2 {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.form__actions--inline {
  display: flex; gap: var(--sp-2); justify-content: flex-end;
}
.form-inline {
  display: flex; gap: var(--sp-2); align-items: center;
}

.badge {
  display: inline-block; padding: 0.1em 0.5em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.badge--green { background: var(--c-accent2-050); color: var(--c-accent2-900); }

/* ------------------------- Admin store : checklist ------------------------- */
.admin-tabs {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border);
}
.admin-tabs a {
  padding: var(--sp-2) var(--sp-3); text-decoration: none;
  color: var(--fg); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-tabs a.is-active {
  color: var(--accent-strong); border-bottom-color: var(--accent);
  font-weight: var(--fw-semibold);
}

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
.checklist__form {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; margin: 0;
}
.checklist__check {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-surface); cursor: pointer;
  font-size: var(--fs-md); color: var(--fg-muted);
}
.checklist__item.is-done .checklist__check {
  background: var(--c-accent2-700); color: var(--c-blanc);
  border-color: var(--c-accent2-700);
}
.checklist__label { flex: 1; }
.checklist__item.is-done .checklist__label { color: var(--fg-muted); text-decoration: line-through; }
.checklist__when { color: var(--fg-muted); font-size: var(--fs-xs); }

.admin-block { margin-bottom: var(--sp-7); }
.admin-block__action { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--bg-subtle); border-radius: var(--radius-md); }

.admin-dl {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-4);
}
.admin-dl dt { font-weight: var(--fw-semibold); color: var(--fg-muted); }
.admin-dl dd { color: var(--fg-strong); }

.ticket-message {
  padding: var(--sp-4); border-radius: var(--radius-md);
  margin-bottom: var(--sp-3); border: 1px solid var(--border);
}
.ticket-message--client { background: var(--accent-soft); }
.ticket-message--admin { background: var(--c-accent2-050); border-color: var(--c-accent2-200); }
.ticket-message header {
  display: flex; justify-content: space-between;
  margin-bottom: var(--sp-2); font-size: var(--fs-sm);
}

/* Tags supplementaires propres au store */
.tag--paid_pending_setup { background: var(--c-bleu-050); color: var(--c-bleu-900); }
.tag--live { background: var(--c-accent2-050); color: var(--c-accent2-900); }
.tag--cancelled { background: var(--c-gris-100); color: var(--fg-muted); }
.tag--high { background: #fdf3f3; color: var(--danger); }
.tag--normal { background: var(--c-bleu-050); color: var(--c-bleu-900); }
.tag--low { background: var(--c-gris-100); color: var(--fg-muted); }
.tag--in_progress { background: #fff5e0; color: #7a5500; }
.tag--resolved { background: var(--c-accent2-050); color: var(--c-accent2-900); }
.tag--closed { background: var(--c-gris-100); color: var(--fg-muted); }

/* Page auth (login admin/client) */
.auth-page {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-bleu-050), var(--c-accent2-050));
  padding: var(--sp-5);
}
.auth-card {
  width: 100%; max-width: 440px; padding: var(--sp-7);
  background: var(--bg-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.auth-card--wide { max-width: 560px; }
.auth-card__title {
  font-family: var(--font-serif); font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}
.auth-card__sub { color: var(--fg-muted); margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.auth-card__link { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.tfa-qr { text-align: center; margin: var(--sp-5) 0; }
.tfa-qr img { border: 1px solid var(--border); padding: var(--sp-3); border-radius: var(--radius-md); }

.prose--faq h2 {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* ------------------------- Compat templates store ------------------------- */
/* Alias des classes utilisees dans les templates store qui ne correspondent
   pas exactement aux classes du moteur 1asso1site-core. Reproduit le style
   de .field / .field__help / .field__input du moteur, avec un look raffine. */

.form__field {
  display: block;
  margin-bottom: var(--sp-5);
}
.form__field > label {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
}
.form__field input[type="text"],
.form__field input[type="email"],
.form__field input[type="password"],
.form__field input[type="tel"],
.form__field input[type="number"],
.form__field textarea,
.form__field select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--fg-strong);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  line-height: 1.5;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  box-shadow: inset 0 1px 2px rgba(15, 37, 80, 0.04);
}
.form__field input:hover,
.form__field textarea:hover,
.form__field select:hover {
  border-color: var(--c-bleu-500);
}
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 2px rgba(15, 37, 80, 0.04),
    0 0 0 3px var(--accent-soft);
  background: var(--bg-surface);
}
.form__field input::placeholder,
.form__field textarea::placeholder {
  color: var(--c-gris-300);
}
.form__field textarea {
  min-height: 160px;
  resize: vertical;
  font-family: var(--font-sans);
}

.form__help {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-bottom: var(--sp-2);
  line-height: 1.5;
}

.form__actions--inline {
  display: flex; gap: var(--sp-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Stat card link (utilise dans dashboard admin store) */
.stat-card__link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: none;
}
.stat-card__link:hover { text-decoration: underline; }

/* Sous-titre de page admin (utilise dans dashboard, order_detail, etc.) */
.admin-page__subtitle {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  margin-top: calc(-1 * var(--sp-2));
  margin-bottom: var(--sp-4);
}

/* Burger : le moteur passe deja .burger en inline-flex a 860px. Rien
   a redefinir cote store. */

/* ========== Page tarifs : matrice 5 cas ========== */
.tier-block {
  margin-bottom: var(--sp-9);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--border);
}
.tier-block:last-of-type { border-bottom: 0; }
.tier-block__header { text-align: center; margin-bottom: var(--sp-6); }
.tier-block__header h2 {
  font-family: var(--font-serif);
  margin-bottom: var(--sp-2);
}
.tier-block__subtitle {
  color: var(--fg-muted);
  max-width: 70ch; margin: 0 auto var(--sp-3);
}
.tier-block__monthly {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
}

/* Liste des conversions (evolutions) */
.conversions-list {
  list-style: none; padding: 0; margin: var(--sp-4) 0 var(--sp-6);
  display: grid; gap: var(--sp-4);
}
.conversion-item {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.conversion-item__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.conversion-item__price {
  font-family: var(--font-serif);
  font-size: var(--fs-xl); color: var(--accent-strong);
  font-weight: var(--fw-semibold); white-space: nowrap;
}
.conversion-item__note {
  color: var(--fg); font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}
.conversion-item__path {
  font-size: var(--fs-xs);
}