/* tarifs.css : page /tarifs (cartes, options, abonnements, comparatif) */

.sec-plans { padding-top: var(--s-8); padding-bottom: var(--s-5); }

/* Inclus dans toutes les formules */
.inclus-box { background: var(--c-bg-ia); border: 1px solid var(--c-ia-line); border-radius: var(--r-xl); padding: var(--s-4) var(--s-3); }
.inclus-title { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-24); text-align: center; margin-bottom: var(--s-4); }
.inclus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); }
.inclus li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-1); }
.inclus li:last-child { grid-column: 1 / -1; }
.inclus-ic { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--c-bg); color: var(--c-ia); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); margin-bottom: var(--s-05); }
.inclus-ic .ic { width: 28px; height: 28px; }
.inclus strong { font-family: var(--f-title); font-weight: 600; color: var(--c-ink); }
.inclus span:not(.inclus-ic) { font-size: var(--fs-14); color: var(--c-ink-2); max-width: 200px; }

/* Après la 1re année, site sur 3 ans */
.abo-price { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-24); color: var(--c-ink); }
.abo-annual { font-size: var(--fs-14); }
/* Abonnements : cartes de même hauteur, lien calé en bas */
.abo-grid { align-items: stretch; }
.abo-grid .box .link-more { margin-top: auto; padding-top: var(--s-1); }
.box .link-more { margin-top: auto; }
.box-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2); }

/* Options */
.opt-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.opt-card { display: flex; flex-direction: column; gap: var(--s-1); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-3); }
.opt-ic { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--c-ia-soft); color: var(--c-ia); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-1); }
.opt-ic .ic { width: 24px; height: 24px; }
.opt-name { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-18); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.opt-name .badge, .cmp-prices th .badge { font-size: var(--fs-12); padding: 0 var(--s-1); }
.opt-card p:not(.opt-price) { color: var(--c-ink-2); font-size: var(--fs-14); }
.opt-card .opt-price { margin-top: auto; padding-top: var(--s-1); font-weight: 700; }
.more { margin-top: var(--s-3); }
.more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 56px; padding: var(--s-1h) var(--s-3); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md); font-family: var(--f-title); font-weight: 600; color: var(--c-ink); }
.more summary:hover { border-color: var(--c-ia); }
.more summary .ic { width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--c-ia-soft); color: var(--c-ia); }
.more summary::-webkit-details-marker { display: none; }
.more summary .ic { transition: transform .2s; }
.more[open] summary .ic { transform: rotate(45deg); }
.more .tbl-wrap { margin-top: var(--s-2); }
.more-cmp { margin-top: var(--s-5); }
/* Comparatif des formules : colonne Pro teintée, coches bleues, lignes groupées, 1re colonne fixe au défilement */
.tbl-wrap .cmp-plans { min-width: 640px; font-size: var(--fs-14); }
.cmp-plans th, .cmp-plans td { width: 23%; padding: var(--s-1h) var(--s-2); vertical-align: middle; color: var(--c-ink-2); }
.cmp-plans tbody th { width: 31%; font-weight: 500; color: var(--c-ink); }
.cmp-plans thead th, .cmp-plans thead td { background: var(--c-bg); font-size: var(--fs-18); font-weight: 600; color: var(--c-ink); padding-top: var(--s-3); padding-bottom: var(--s-2); vertical-align: bottom; }
.cmp-plan-price { display: block; font-family: var(--f-body); font-size: var(--fs-14); font-weight: 500; color: var(--c-ink-3); }
.cmp-plans thead th.us { background: var(--c-agence-bg); box-shadow: inset 0 3px 0 var(--c-agence); }
.cmp-plans td.us { background: var(--c-agence-bg); font-weight: 400; }
.cmp-group th { padding: var(--s-2) var(--s-2) var(--s-1); background: var(--c-bg-alt); font-family: var(--f-title); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ia-strong); }
.cmp-plans tr:last-child th, .cmp-plans tr:last-child td { border-bottom: 0; }
.cmp-yes { width: 20px; height: 20px; color: var(--c-ia); }
.cmp-cell { display: flex; gap: var(--s-1); align-items: center; }
.cmp-no { color: var(--c-ink-3); }
.cmp-opt { color: var(--c-ink-3); }
/* Mobile : libellé sur toute la largeur, les 3 formules côte à côte en dessous */
@media (max-width: 640px) {
  .more-cmp .tbl-wrap { overflow: visible; }
  .tbl-wrap .cmp-plans { min-width: 0; }
  .cmp-plans, .cmp-plans thead, .cmp-plans tbody { display: block; }
  .cmp-plans tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--c-line); }
  .cmp-plans th, .cmp-plans td { width: auto; border-bottom: 0; padding: var(--s-1) var(--s-1h); }
  .cmp-plans tbody th { grid-column: 1 / -1; width: auto; padding-top: var(--s-1h); padding-bottom: 0; }
  .cmp-plans tbody td { padding-bottom: var(--s-1h); font-size: var(--fs-12); }
  .cmp-plans thead td { display: none; }
  .cmp-plans thead th { font-size: var(--fs-16); padding: var(--s-2) var(--s-1h) var(--s-1h); }
  .cmp-plans thead th:first-of-type { border-top-left-radius: var(--r-lg); }
  .cmp-plans thead th:last-of-type { border-top-right-radius: var(--r-lg); }
  .cmp-plans tr.cmp-group { display: block; }
  .cmp-group th { display: block; padding: var(--s-1h) var(--s-1h) var(--s-1); }
  .cmp-plans tbody td.us { background: var(--c-agence-bg); }
  .cmp-plans .cmp-cell { align-items: flex-start; }
  .cmp-plans thead { position: sticky; top: 64px; z-index: 2; }
  .cmp-plans thead tr { background: var(--c-bg); border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

.opt-calc { margin-top: var(--s-3); }

/* Tableaux */
.tbl-wrap .cmp-prices { min-width: 0; }
.cmp-prices tbody th { font-weight: 500; }
.cmp-detail { display: block; font-size: var(--fs-14); color: var(--c-ink-3); font-weight: 400; }

/* Développement spécifique */
.dev { display: flex; flex-direction: column; gap: var(--s-4); }
.dev .h2 { color: var(--c-on-dark); }
.dev-txt { display: flex; flex-direction: column; gap: var(--s-2); }
.dev-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.dev-tags li { padding: var(--s-05) var(--s-2); border-radius: var(--r-pill); border: 1px solid var(--c-ink-2); color: var(--c-on-dark); font-size: var(--fs-14); font-weight: 500; }
.dev-cta { display: flex; flex-direction: column; gap: var(--s-2); align-items: stretch; }
.dev-delay { display: flex; justify-content: center; align-items: center; gap: var(--s-1); color: var(--c-on-dark-2); font-weight: 700; }
.dev-cta .btn { width: 100%; }

.apres-note { margin-top: var(--s-4); text-align: center; color: var(--c-ink-2); }

@media (min-width: 641px) {
  .sec-plans { padding-top: var(--s-10); padding-bottom: var(--s-6); }
  .opt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .inclus-box { padding: var(--s-5) var(--s-4); }
}

@media (min-width: 1101px) {
  .opt-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .inclus { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .inclus li:last-child { grid-column: auto; }
    .dev { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-8); }
  .dev-txt { max-width: 720px; }
  .dev-cta { flex: none; }
}