/* ==========================================================================
   PAGES/TARIFS.CSS — Trois offres d'expertise comptable
   --------------------------------------------------------------------------
   Standard / Premium / Renforcée, puis un tableau comparatif détaillé.
   ========================================================================== */

/* === BASCULE MENSUEL / ANNUEL ============================================= */

.bascule {
  display: inline-flex;
  align-items: center;
  border: var(--filet);
  margin-top: var(--e-6);
}
.bascule button {
  min-height: 46px;
  padding: 0 var(--e-5);
  background: transparent;
  border: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-texte);
  cursor: pointer;
  transition: background-color var(--d-court) var(--ease),
              color var(--d-court) var(--ease);
}
.bascule button[aria-pressed="true"] { background: var(--noir); color: var(--blanc); }
.bascule-note { margin-top: var(--e-3); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent); }


/* === LES TROIS OFFRES ===================================================== */
/* Colonnes séparées par un filet vertical, pas des cartes flottantes :
   c'est une grille tarifaire, elle se lit comme un tableau. */

.offres {
  display: grid;
  margin-top: var(--e-8);
  border-top: 1px solid var(--noir);
}
@media (min-width: 950px) { .offres { grid-template-columns: repeat(3, 1fr); } }

.offre {
  display: flex;
  flex-direction: column;
  padding: var(--e-7) 0;
  border-bottom: var(--filet);
}
@media (min-width: 950px) {
  .offre { padding: var(--e-7) var(--e-6); border-bottom: 0; }
  .offre + .offre { border-left: var(--filet); }
  .offre:first-child { padding-left: 0; }
  .offre:last-child  { padding-right: 0; }
}

/* L'offre mise en avant est marquée par un aplat, pas par une ombre
   ni par une échelle différente : l'alignement reste intact. */
.offre-avant { background: var(--gris-surface); }
@media (min-width: 950px) {
  .offre-avant { padding-inline: var(--e-6); margin-top: -1px; border-top: 2px solid var(--accent); }
}

.offre-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); }
.offre-nom  { font-size: var(--t-l); letter-spacing: -0.03em; }
.offre-marque {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
}

.offre-pour { margin-top: var(--e-4); font-size: var(--t-s); color: var(--gris-texte); max-width: 34ch; }

.offre-prix { margin-top: var(--e-6); display: flex; align-items: baseline; gap: var(--e-3); }
.offre-montant {
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.offre-unite { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--gris-texte); }
.offre-mention { margin-top: var(--e-3); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--gris-texte); }

.offre-inclus { margin-top: var(--e-6); padding-top: var(--e-5); border-top: var(--filet); flex-grow: 1; }
.offre-inclus li {
  position: relative;
  padding-left: var(--e-6);
  padding-block: var(--e-2);
  font-size: var(--t-s);
  color: var(--gris-texte);
}
.offre-inclus li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 8px; height: 1px;
  background: var(--accent);
}
.offre .bouton { margin-top: var(--e-6); width: 100%; }


/* === TABLEAU COMPARATIF =================================================== */

.comparatif-enveloppe {
  margin-top: var(--e-8);
  overflow-x: auto;
  /* Le tableau garde ses colonnes lisibles : il défile au lieu de se tasser. */
  -webkit-overflow-scrolling: touch;
}
.comparatif { min-width: 720px; }
.comparatif th:first-child { width: 40%; }
.comparatif th:not(:first-child),
.comparatif td:not(:first-child) { text-align: center; width: 20%; }

.comparatif tbody th {
  font-weight: 450;
  font-size: var(--t-s);
  color: var(--noir);
}
.comparatif .groupe th {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris-texte);
  background: var(--gris-surface);
  padding-block: var(--e-3);
}
.comparatif .col-avant { background: var(--accent-voile); }

.comparatif-note {
  margin-top: var(--e-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
}


/* === HORS FORFAIT ========================================================= */

.hors-forfait {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-8);
  border-top: var(--filet);
  padding-top: var(--e-7);
}
@media (min-width: 800px) { .hors-forfait { grid-template-columns: repeat(2, 1fr); gap: var(--e-7); } }
.hors-forfait h3 { margin-bottom: var(--e-3); }
.hors-forfait p { font-size: var(--t-s); color: var(--gris-texte); max-width: 46ch; }