/**
 * APERMIS v3 — Page Tarifs (template-tarifs-v3.php, chantier #24).
 * Autoportante : dépend de tokens.css + base.css + components.css uniquement
 * (les patterns vcard/final de la home y sont redéclinés localement — la home
 * reste intouchée). Chargée uniquement sur ce template.
 */

/* ═════ 1. Hero parcours — bandeau crème, page de décision ═════ */
.ap-tarifs-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 56px); }
.ap-tarifs-hero h1 { max-width: 820px; margin: var(--ap-s-3) 0 14px; } /* marine serif (base) */
.ap-tarifs-hero h1 em { font-style: italic; color: var(--ap-corail-d); } /* 3,57:1 crème — texte large */
.ap-tarifs-lead {
  font-size: var(--ap-fs-lead);
  color: var(--ap-ink);
  max-width: 720px;
  margin-bottom: var(--ap-s-6);
}

/* v3.1 : ancrage prix + tél hero */
.ap-tarifs-anchorline {
  display: inline-block;
  background: #FFF7F2;
  border: 1px solid #F6D8C9;
  border-radius: 12px;
  padding: 10px 16px;
  color: #6E4F3D;                    /* 6,6:1 */
  font-size: 15px;
  margin: 0 0 var(--ap-s-6);
  max-width: 720px;
}
.ap-tarifs-anchorline strong { color: var(--ap-marine); }
.ap-tarifs-hero-tel { margin: var(--ap-s-4) 0 0; font-size: 15px; color: var(--ap-ink); }
.ap-tarifs-hero-tel a { font-weight: 600; color: var(--ap-marine); }

/* ═════ 2. Comparatif — tableau AA (fond blanc de section) ═════ */
.ap-cmp-wrap { overflow-x: auto; border-radius: var(--ap-r-card); border: 1px solid var(--ap-sable); }
.ap-cmp-wrap:focus-visible { outline: 2px solid var(--ap-focus); outline-offset: 2px; }
.ap-cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--ap-white); min-width: 640px; }
.ap-cmp th, .ap-cmp td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ap-sable);
}
.ap-cmp thead th {
  background: var(--ap-marine);
  color: #fff;                              /* 11,6:1 */
  font-family: var(--ap-sans); font-weight: 600; font-size: 14px;
}
.ap-cmp tbody th[scope="row"] {
  font-weight: 600; color: var(--ap-marine); width: 190px;
  background: none;
}
.ap-cmp tbody tr:nth-child(even) { background: #FBF9F5; }
.ap-cmp tbody tr:last-child th, .ap-cmp tbody tr:last-child td { border-bottom: 0; }
.ap-cmp-win { background: #FFF7F2; color: var(--ap-ink); font-weight: 600; } /* colonne APERMIS mise en avant */
.ap-tarifs-small { font-size: 12.5px; color: var(--ap-muted); font-style: italic; margin: var(--ap-s-3) 0 0; }

/* ═════ 3. « Pas abandonné » — 6 cartes ═════ */
.ap-tarifs-grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ap-tcard {
  background: var(--ap-white);
  border: 1px solid var(--ap-sable);
  border-radius: var(--ap-r-card);
  padding: 22px;
}
.ap-tcard-ico { font-size: 26px; margin-bottom: 10px; }
.ap-tcard h3 { font-size: 1.03rem; margin-bottom: 5px; }
.ap-tcard p { font-size: 14px; color: var(--ap-muted); margin: 0; }

/* ═════ 4. Accompagnateur — éditorial photo + texte ═════ */
.ap-tarifs-acc {
  background: var(--ap-white);
  border: 1px solid var(--ap-sable);
  border-left: 5px solid var(--ap-corail);
  border-radius: var(--ap-r-card);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: var(--ap-s-6);
  align-items: start;
}
.ap-tarifs-acc-photo { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; }
.ap-tarifs-acc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-tarifs-acc p { color: var(--ap-muted); font-size: 15px; margin: 0 0 10px; }
.ap-tarifs-acc-list { margin: 8px 0 0 18px; padding: 0; color: var(--ap-ink); font-size: 14.5px; }
.ap-tarifs-acc-list li { margin-bottom: 4px; }
/* v3.1 : les « 3 portes » du bloc accompagnateur */
.ap-tarifs-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: var(--ap-s-4) 0;
}
.ap-door {
  background: #FFF7F2;
  border: 1px solid #F6D8C9;
  border-radius: 12px;
  padding: 14px 16px;
}
.ap-door h3 { font-size: 14.5px; margin: 0 0 6px; color: var(--ap-marine); }
.ap-door p { font-size: 13.5px; color: #6E4F3D !important; margin: 0; max-width: none; }
.ap-door a { font-weight: 600; color: var(--ap-marine); }
@media (max-width: 960px) { .ap-tarifs-doors { grid-template-columns: 1fr; } }

/* ═════ 5. Offres — cartes blanches, prix serif marine, CTA par carte ═════ */
.ap-tarifs-offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ap-ocard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ap-white);
  border: 1px solid var(--ap-sable);
  border-radius: var(--ap-r-card);
  padding: 22px;
  scroll-margin-top: 90px;                  /* ancres #offer-* sous le header sticky */
}
.ap-ocard-hot { border: 2px solid var(--ap-corail); }
.ap-ocard-start { border: 2px solid var(--ap-corail); background: #FFFCF9; } /* v3.1 : Découverte « Commencez ici » */
/* tag « Commencez ici » : marine comme « Populaire » (12px = petit texte, AA) */
.ap-ocard-tag {
  position: absolute; top: -12px; left: 20px;
  background: var(--ap-marine); color: #fff; /* 12px : marine 11,6:1 (blanc/corail = 3,2:1, insuffisant en petit texte) */
  font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: var(--ap-r-btn);
}
.ap-ocard-ico { font-size: 24px; margin-bottom: 6px; }
.ap-ocard h3 { font-size: 1.03rem; margin-bottom: 2px; }
.ap-ocard-price {
  font-family: var(--ap-serif);
  font-weight: 700;
  font-size: 2rem;                          /* prix en gros serif marine (brief) */
  color: var(--ap-marine);
  margin: 4px 0 6px;
}
.ap-ocard-desc { font-size: 13.5px; color: var(--ap-muted); margin: 0 0 8px; }
/* v3.1 : description « pour qui » restaurée (italique) + liste ✓ bénéfices */
.ap-ocard-pourqui { font-size: 13.5px; font-style: italic; color: var(--ap-muted); margin: 0 0 12px; }
.ap-ocard-features { list-style: none; margin: 0 0 12px; padding: 0; }
.ap-ocard-features li {
  position: relative;
  padding: 3px 0 3px 22px;
  font-size: 13.5px;
  color: var(--ap-ink);
}
.ap-ocard-features li::before {
  content: "✓";
  position: absolute; left: 2px;
  color: var(--ap-success);
  font-weight: 700;
}
.ap-ocard-detail { width: 100%; font-size: 13px; border-collapse: collapse; margin-bottom: 12px; }
.ap-ocard-detail th, .ap-ocard-detail td { padding: 5px 0; border-bottom: 1px dashed var(--ap-sable); color: var(--ap-muted); }
.ap-ocard-detail th[scope="row"] { font-weight: 400; text-align: left; }
.ap-ocard-detail td:last-child { text-align: right; font-weight: 600; color: var(--ap-ink); }
.ap-ocard-detail tr:last-child th, .ap-ocard-detail tr:last-child td { border-bottom: 0; color: var(--ap-marine); font-weight: 700; }
.ap-ocard-warn {
  font-size: 12.5px;
  color: var(--ap-warn);                    /* 5,3:1 */
  background: var(--ap-warn-bg);
  border: 1px solid #EFDDBB;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 12px;
}
.ap-ocard-cta { margin-top: auto; text-align: center; }

/* ═════ 6. Profils ═════ */
.ap-tarifs-profils { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ap-pf {
  background: var(--ap-white);
  border: 1px solid var(--ap-sable);
  border-radius: 14px;
  padding: 18px;
  font-size: 14px;
}
.ap-pf h3 { font-size: 15px; margin-bottom: 4px; }
.ap-pf p { color: var(--ap-muted); margin: 0 0 8px; }
.ap-pf a { display: inline-block; color: var(--ap-corail-text); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.ap-pf a:hover { text-decoration: underline; }

/* ═════ 8. CTA final — pattern home (redécliné localement) ═════ */
.ap-final {
  background: linear-gradient(120deg, var(--ap-corail), var(--ap-corail-d));
  color: #fff;
  border-radius: var(--ap-r-panel);
  padding: clamp(32px, 5vw, 54px);
  text-align: center;
}
.ap-final h2 { color: #fff; font-size: clamp(1.5rem, 1.36rem + 0.6vw, 1.75rem); margin-bottom: 10px; max-width: 900px; margin-left: auto; margin-right: auto; }
.ap-final > p { color: #fff; font-weight: 700; font-size: 1.1875rem; margin-bottom: var(--ap-s-6); } /* AA texte large sur corail */
.ap-final .ap-btn-ghost { border-color: #fff; }
.ap-final-more { margin: 18px 0 0; }
.ap-final-more a { color: #fff; font-weight: 700; font-size: 1.1875rem; text-decoration: underline; text-underline-offset: 3px; }

/* Ancres de section sous le header sticky (72px) — même marge que les cartes offre */
#comparatif, #compare, #offres, #accompagnateur, #profils, #faq, #contact {
  scroll-margin-top: calc(var(--ap-header-h) + 18px);
}

/* ═════ Responsive (640 / 960) ═════ */
@media (max-width: 960px) {
  .ap-tarifs-grid6 { grid-template-columns: repeat(2, 1fr); }
  .ap-tarifs-offres { grid-template-columns: repeat(2, 1fr); }
  .ap-tarifs-profils { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ap-tarifs-grid6 { grid-template-columns: 1fr; }
  .ap-tarifs-offres { grid-template-columns: 1fr; }
  .ap-tarifs-profils { grid-template-columns: 1fr; }
  .ap-tarifs-acc { grid-template-columns: 1fr; }
}