/* =========================================================
  Page Tarifs & Abonnements — Iliade / WPZ
  File: /assets/css/page-tarifs-abonnements.css
  Dépendances: variables.css + styles.css (déjà en global)
========================================================= */

.wpz-wrap{
  width: min(var(--container, 1200px), calc(100% - (var(--gutter, 20px) * 2)));
  margin-inline: auto;
}

.wpz-tarifs{
  padding-block: clamp(18px, 3vw, 28px);
  color: var(--text);
  font-family: var(--font-sans);
}

.wpz-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--alpha-ink-03);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: .2px;
  margin: 0 0 12px;
}

.wpz-h1{
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  margin: 0 0 10px;
  color: var(--text);
}

.wpz-h2{
  font-family: var(--font-head);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.12;
  margin: 0;
  color: var(--text);
}

.wpz-h3{
  font-family: var(--font-head);
  font-size: clamp(18px, 2vw, 22px);
  margin: 0;
  color: var(--text);
}

.wpz-lead{
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: var(--lh, 1.55);
  color: var(--text-2);
  margin: 10px 0 0;
  max-width: 66ch;
}

.wpz-sub{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: var(--lh, 1.55);
  max-width: 72ch;
}

/* =========================================================
   Sections
========================================================= */
.wpz-tarifs__section{
  padding-block: clamp(26px, 4vw, 56px);
}

.wpz-tarifs__section--alt{
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wpz-section-head{
  display: grid;
  gap: 8px;
  margin-bottom: clamp(16px, 2vw, 22px);
}

/* =========================================================
   HERO
========================================================= */
.wpz-tarifs__hero{
  padding-block: clamp(20px, 4.5vw, 64px);
  background: var(--hero-bg);
}

.wpz-tarifs__hero-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

@media (max-width: 980px){
  .wpz-tarifs__hero-grid{ grid-template-columns: 1fr; }
}

.wpz-tarifs__hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.wpz-tarifs__trust{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
}

.wpz-tarifs__trust li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color: var(--text-2);
  font-weight: 600;
}

.wpz-tarifs__trust .dashicons{
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: var(--brand-green);
  margin-top: 2px;
}

.wpz-tarifs__hero-card{
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  padding: 16px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}

.wpz-tarifs__mini{
  display: grid;
  gap: 12px;
}

.wpz-tarifs__mini-item{
  padding: 12px;
  border-radius: var(--r-14);
  background: var(--surface);
  border: 1px solid var(--line);
}

.wpz-tarifs__mini-title{
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
}

.wpz-tarifs__mini-sub{
  color: var(--muted);
  line-height: var(--lh, 1.55);
  font-size: var(--fs-14);
}

.wpz-tarifs__hero-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-14);
  background: var(--surface);
  border: 1px dashed var(--line-2);
  color: var(--text-2);
  font-weight: 600;
}

.wpz-tarifs__hero-note .dashicons{
  margin-right: 8px;
  color: var(--brand-navy);
  opacity: .75;
}

/* =========================================================
   Grid outils
========================================================= */
.wpz-grid{
  display: grid;
  gap: clamp(12px, 2vw, 18px);
}

.wpz-grid--3{
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px){
  .wpz-grid--3{ grid-template-columns: 1fr; }
}

.wpz-tool{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.wpz-tool__icon{
  display:inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  align-items:center;
  justify-content:center;
  background: var(--alpha-brand-10);
  border: 1px solid var(--alpha-brand-18);
}

.wpz-tool__icon .dashicons{
  font-size: 22px;
  width: 22px;
  height: 22px;
  color: var(--brand-green);
}

.wpz-tool p{
  margin: 10px 0 0;
  color: var(--text-2);
  line-height: var(--lh, 1.55);
}

.wpz-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

/* =========================================================
   Pricing
========================================================= */
.wpz-pricing{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 18px);
  align-items: stretch;
}

@media (max-width: 980px){
  .wpz-pricing{ grid-template-columns: 1fr; }
}

.wpz-plan{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-20);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.wpz-plan__head{
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.wpz-plan__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-12);
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--pill-soft-bg);   /* ✅ déjà chez toi */
  border: 1px solid var(--pill-soft-brd);
  color: var(--brand-green);
}

/* Badge PRO premium : doré */
.wpz-plan--featured .wpz-plan__badge,
.wpz-plan__badge--hot{
  background: rgba(242, 201, 76, .18); /* fallback proche brand-yellow */
  border-color: rgba(242, 201, 76, .40);
  color: #8A5B00;
}

/* Carte Pro premium (niveau 2) */
.wpz-plan--featured{
  position: relative;
  border: 2px solid rgba(242, 201, 76, .55);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  background:
    linear-gradient(180deg, rgba(242, 201, 76, .10), rgba(255,255,255,0) 55%),
    var(--surface);
}

@media (max-width: 980px){
  .wpz-plan--featured{ transform: none; }
}

.wpz-plan--featured::before{
  content:'';
  position:absolute;
  inset: 10px;
  border-radius: calc(var(--r-20) - 10px);
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(242,201,76,.22);
  opacity: .9;
}

.wpz-plan__title{
  margin: 10px 0 0;
  font-size: var(--fs-24);
  font-family: var(--font-head);
  color: var(--text);
}

.wpz-plan__desc{
  margin: 8px 0 0;
  color: var(--muted);
  line-height: var(--lh, 1.55);
}

.wpz-plan__price{
  display:flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}

.wpz-plan__amount{
  font-size: clamp(30px, 3.2vw, 38px);
  font-weight: 900;
  letter-spacing: -.4px;
  color: var(--brand-navy);
}

.wpz-plan__period{
  color: var(--muted);
  font-weight: 600;
}

.wpz-plan__fine{
  margin: 10px 0 0;
  color: var(--muted-2);
  font-size: var(--fs-12);
}

.wpz-plan__body{
  padding: 16px 18px 18px;
  display: grid;
  gap: 12px;
}

.wpz-plan__h{
  margin: 0;
  font-size: var(--fs-12);
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--muted);
}

.wpz-check{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.wpz-check li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: var(--text-2);
  font-weight: 600;
}

.wpz-check .dashicons{
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: var(--brand-green);
  margin-top: 2px;
}

.wpz-muted{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

/* =========================================================
   CTA box
========================================================= */
.wpz-tarifs__cta-box{
  margin-top: clamp(16px, 2vw, 22px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-20);
  padding: 16px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 980px){
  .wpz-tarifs__cta-box{ flex-direction: column; align-items: stretch; }
}

.wpz-tarifs__cta-right{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* =========================================================
   FAQ
========================================================= */
.wpz-faq{
  display: grid;
  gap: 10px;
}

.wpz-faq__item{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.wpz-faq__item > summary{
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
  list-style: none;
}
.wpz-faq__item > summary::-webkit-details-marker{ display:none; }

.wpz-faq__content{
  margin-top: 10px;
  color: var(--text-2);
  line-height: var(--lh, 1.55);
}

/* =========================================================
   Buttons (fallback)
   - CTA principal en vert (brand-green)
========================================================= */
.wpz-btn{
  height: var(--btn-h, 46px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 0 14px;
  border-radius: var(--btn-r, 12px);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-decoration:none;
  font-weight: 800;
  line-height: 1;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
  user-select: none;
}

.wpz-btn:active{ transform: translateY(1px); }
.wpz-btn--block{ width: 100%; }

.wpz-btn--primary{
  background: linear-gradient(180deg, var(--brand-green-2), var(--brand-green));
  border-color: rgba(23,160,81,.45);
  color: #fff;
  box-shadow: 0 10px 22px rgba(23,160,81,.18);
}

.wpz-btn--primary:hover{
  opacity: .96;
  transform: translateY(-1px);
}

.wpz-btn--ghost{
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}

.wpz-btn--ghost:hover{
  background: var(--alpha-ink-03);
}

.wpz-btn:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}