/* ============================================================
   page-premium-v2.css — page TECO Haut Niveau (B2B Esprit Pro)
   ============================================================
   Charge APRES framework-v2.css + page-home-v2.css.
   ============================================================ */

/* ── Hero centré ──────────────────────────────────────────── */
.prem-hero {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) 1.5rem clamp(3rem, 6vw, 4.5rem);
  text-align: center;
  overflow: hidden;
}
.prem-hero__inner {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.prem-hero__halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.prem-hero__halo--violet {
  width: 480px; height: 480px;
  top: -120px; left: -120px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.20), transparent 70%);
}
.prem-hero__halo--rouge {
  width: 520px; height: 520px;
  bottom: -160px; right: -160px;
  background: radial-gradient(circle, rgba(232, 0, 10, 0.18), transparent 70%);
}
.prem-hero__h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin: 1rem 0 1.25rem;
}
.prem-hero__h1 .hl {
  background: linear-gradient(135deg, #8b5cf6 0%, var(--color-rouge-teco) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.prem-hero__h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-rouge-teco);
}
.prem-hero__sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 auto 1.75rem;
  max-width: 720px;
}
.prem-hero__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.prem-hero__note {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ── Section helpers ─────────────────────────────────────── */
.prem-section {
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
}
.prem-section__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.prem-section__head {
  text-align: center;
  margin-bottom: 2rem;
}
.prem-section__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0.75rem 0 0.5rem;
}
.prem-section__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-rouge-teco);
}
.prem-section__sub {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 auto;
  max-width: 640px;
}
.prem-section__note {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
/* Liens de contenu noyes dans la note (ex. "TECO Academy", "TECO Cabinet") : rouge deja pose en inline, on ajoute le soulignement */
.prem-section__note a {
  color: var(--color-text-primary);
  font-style: italic;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-rouge-teco);
}
.prem-section__note a:hover { text-decoration: none; }

/* ── Toggle billing mensuel / annuel ─────────────────────── */
.prem-billing-toggle {
  display: inline-flex;
  margin: 0 auto 2rem;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
}
[data-theme="light"] .prem-billing-toggle {
  background: rgba(0, 0, 0, 0.04);
}
.prem-billing-toggle-wrap {
  text-align: center;
}
.prem-billing-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.prem-billing-btn:hover { color: var(--color-text-primary); }
.prem-billing-btn.is-active {
  background: var(--color-rouge-teco);
  color: #fff;
}
.prem-billing-saving {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.20);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.prem-billing-btn:not(.is-active) .prem-billing-saving {
  background: rgba(232, 0, 10, 0.15);
  color: var(--color-rouge-teco);
}

/* ── Cards tarifs ─────────────────────────────────────────── */
.prem-pour-qui__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.prem-pq-card {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.prem-pq-card--featured {
  border: 1px solid rgba(232, 0, 10, 0.40) !important;
  box-shadow: 0 12px 40px rgba(232, 0, 10, 0.15);
}
.prem-pq-card__badge {
  position: absolute;
  top: -10px;
  right: 1.5rem;
  background: var(--color-rouge-teco);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.prem-pq-card__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
}
.prem-pq-card__desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}
.prem-pq-card__desc em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-rouge-teco);
}
.prem-pq-card__list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.prem-pq-card__list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  padding-left: 1.25rem;
  position: relative;
}
.prem-pq-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--color-rouge-teco);
  font-weight: 700;
}
.prem-pq-card__list em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-rouge-teco);
}

/* Prix */
.prem-price-block {
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-item);
}
[data-theme="light"] .prem-price-block {
  background: rgba(0, 0, 0, 0.03);
}
.prem-price-amount {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}
.prem-price-amount strong {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--color-rouge-teco);
  margin-right: 0.25rem;
}
.prem-price-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

/* Bouton checkout */
.prem-checkout-form { margin: 0; }
.prem-checkout-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--color-rouge-teco);
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.prem-checkout-btn:hover {
  background: var(--color-rouge-deep);
  transform: translateY(-1px);
}
.prem-checkout-btn em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.prem-cabinet-altcta {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}
.prem-cabinet-altcta a {
  color: var(--color-rouge-teco);
  text-decoration: none;
  font-weight: 600;
}
.prem-cabinet-altcta a:hover { text-decoration: underline; }

/* Payment note (sous les cartes tarifs) */
.prem-payment-note {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.prem-payment-note strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ── 4 preuves ────────────────────────────────────────────── */
.prem-preuves__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.prem-preuve {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.prem-preuve__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--color-rouge-teco);
  line-height: 1;
}
.prem-preuve__title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text-primary);
  margin: 0.25rem 0 0;
  line-height: 1.3;
}
.prem-preuve__desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── FAQ premium (details/summary) ────────────────────────── */
.prem-faq__list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.prem-faq__item {
  padding: 0;
  overflow: hidden;
}
.prem-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  transition: background 150ms ease;
}
.prem-faq__q::-webkit-details-marker { display: none; }
.prem-faq__q::marker { display: none; content: ''; }
.prem-faq__q:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="light"] .prem-faq__q:hover { background: rgba(0, 0, 0, 0.025); }
.prem-faq__a {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 0.75rem;
}
.prem-faq__a a {
  color: var(--color-rouge-teco);
  text-decoration: underline;
}
.prem-faq__a em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-rouge-teco);
}

/* ── CTA final ────────────────────────────────────────────── */
.prem-cta-final__inner {
  text-align: center;
}
.prem-cta-final__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 1rem 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .prem-pour-qui__grid { grid-template-columns: 1fr; }
  .prem-preuves__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .prem-preuves__grid { grid-template-columns: 1fr; }
  .prem-billing-saving { display: none; }
  .prem-price-amount strong { font-size: 1.75rem; }
}

/* ============================================================
   TRES PETITS ECRANS (<= 480 px) : la page ne doit JAMAIS etre
   plus large que l'ecran.
   Constat du 25/07 : a 320 px, la page faisait 366 px. Un element
   position:fixed se calant sur la largeur de PAGE, le menu mobile
   en feuille basse sortait de 46 px a droite.
   Cause : le bouton d'abonnement est un inline-flex dont les
   elements ne se replient pas. Il reclamait 278 px la ou la carte
   n'en offrait que 208, et une piste en 1fr ne peut pas descendre
   sous le minimum de son contenu.
   (Les halos du hero, eux, sont deja decoupes par .prem-hero en
   overflow:hidden : ils ne poussent rien.)
   ============================================================ */
@media (max-width: 480px) {
  /* minmax(0,1fr) : la piste peut descendre sous son min-content */
  .prem-pour-qui__grid { grid-template-columns: minmax(0, 1fr); }
  .prem-pq-card { padding: 1.35rem; }
  /* Le bouton redevient du texte qui coule : il se replie, et la
     fleche suit le dernier mot au lieu de tomber seule sur une ligne. */
  .prem-checkout-btn { display: block; text-align: center; }
  .prem-checkout-btn svg { display: inline; vertical-align: middle; margin-left: 0.35rem; }
}

/* ============================================================
   Renonciation au droit de retractation (27/07/2026)
   Le service s'ouvre des le paiement : pour que la renonciation aux
   14 jours soit opposable, elle doit etre recueillie ici, chez nous,
   par une case jamais pre-cochee. Sans elle le checkout refuse.
   ============================================================ */
.prem-retract {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--tc-text-muted, #9aa0b4);
  text-align: left;
}
.prem-retract input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--tc-rouge, #E8000A);
  cursor: pointer;
}
.prem-retract label { cursor: pointer; }
.prem-retract a { color: inherit; text-decoration: underline; }
.prem-retract a:hover { color: var(--tc-text, #e8eaf2); }

/* Le bouton de la carte Cabinet est un lien depuis le 27/07/2026 : l'offre se
   traite a la main tant que les sieges n'existent pas. Meme aspect que les
   boutons d'abonnement, sans le soulignement herite des liens. */
.prem-checkout-btn--lien { text-decoration: none; }