/* Page « Site Premium » (07/10). Elle porte la langue de /tarifs
   (tarifs.css : ouverture, titres, tableau, bloc final) et n ajoute que
   ce qui lui est propre : l achat dans l ouverture, les huit points, le
   tableau a DEUX colonnes et les etapes du projet. */

/* ── Ouverture : la phrase, puis le prix et le bouton ─────────────── */
.premium__bas { align-items: flex-end; }
.premium__chapo {
  margin: 0; max-width: 46ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.375rem); line-height: 1.6; color: var(--ink-soft);
}
.premium__achat { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.premium__achat .site__prix { margin: 0; padding: 0; }
.premium__commander { margin-top: 0; min-height: 44px; }

/* ── Les huit points : des fiches numerotees, quatre par rang ─────── */
.premium__pourquoi { padding: clamp(2rem, 1.5rem + 2vw, 4rem) 0 clamp(1rem, 0.5rem + 2vw, 2rem); }
.premium__points {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
}
.premium__point {
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--off-white); border: 1px solid var(--ink-faint); border-radius: 1.25rem;
  box-shadow: 0 30px 60px -38px rgba(11, 5, 47, 0.25);
}
html[data-theme="dark"] .premium__point { border-color: rgba(196, 184, 118, 0.22); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); }
.premium__num {
  margin: 0 0 clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: 0.08em;
  color: var(--t-accent);
}
.premium__point-titre {
  margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.2;
}
.premium__point-texte { margin: 0.7rem 0 0; font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.55; color: var(--ink-soft); }

/* ── Le tableau a deux colonnes : le Premium porte la teinte ──────── */
.compare--deux { --cols: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.compare--deux [data-col="1"] { background: rgba(11, 5, 47, 0.035); }
html[data-theme="dark"] .compare--deux [data-col="1"] { background: rgba(196, 184, 118, 0.07); }
.compare--deux[data-survol="1"] [data-col="1"] { background: rgba(11, 5, 47, 0.07); }
html[data-theme="dark"] .compare--deux[data-survol="1"] [data-col="1"] { background: rgba(196, 184, 118, 0.13); }
.tarifs__note a { color: inherit; text-underline-offset: 3px; }

/* ── Les etapes du projet : une route, quatre arrets ──────────────── */
.premium__projet { padding: clamp(1rem, 0.5rem + 2vw, 2rem) 0 clamp(2rem, 1.5rem + 2vw, 4rem); }
.premium__etapes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
}
.premium__etape { padding-top: 1.1rem; border-top: 2px dashed var(--ink-faint); }
.premium__etape-num {
  margin: 0 0 0.6rem;
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 0.95rem; letter-spacing: 0.08em; color: var(--t-accent);
}
.premium__etape-titre { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.2; }
.premium__etape-texte { margin: 0.55rem 0 0; font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 62rem) {
  .premium__points, .premium__etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .compare--deux { --cols: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
  .premium__points, .premium__etapes { grid-template-columns: minmax(0, 1fr); }
  .premium__bas { flex-direction: column; align-items: flex-start; }
}