/* Negoz — maquette de Tarifs : ce qui lui est propre (les cartes viennent de site.css).
   À reprendre dans site.css : .comparatif (tableau qui devient fiches sur téléphone), .pass ul (liste de carte). */

.tete-page .pile { max-width: 46rem; }
.tete-page .chapo { max-width: 38rem; }

/* --- Bloc 2 : cartes avec listes --- */
.intro-pass .chapo { max-width: 46rem; }
.pass-liste .pass { grid-template-rows: auto auto auto 1fr auto; }
.pass .accroche { font-weight: 600; }
.pass ul { display: grid; align-content: start; gap: 0; margin-top: .3rem; }
.pass li { padding-block: .65rem; border-top: 1px solid var(--color-trait); line-height: 1.45; }
.pass-conseille li { border-top-color: rgb(255 255 255 / .28); }
.sous-cartes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 2rem; margin-top: 2.4rem; }
.reassurance { font-weight: 700; }
@media (max-width: 899px) { .pass-conseille { order: -1; } .pass-liste { margin-top: 3rem; } }

/* Les trois biens : sous les cartes, calés à droite, du côté du Sérénité */

/* --- Blocs 3 et 6 : tableaux --- */
.tableau { margin-top: clamp(2rem, 4vw, 3rem); }
.comparatif { width: 100%; border-collapse: collapse; font-size: var(--text-texte); line-height: 1.4; }
.comparatif th, .comparatif td { padding: 1rem 1.1rem; text-align: left; vertical-align: top; }
.comparatif thead th { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; font-size: 1.0625rem; border-bottom: 3px solid var(--color-encre); }
.comparatif tbody th { font-weight: 700; width: 28%; }
.comparatif tbody tr { border-bottom: 1px solid var(--color-trait); }
.comparatif tbody tr:nth-child(odd) th, .comparatif tbody tr:nth-child(odd) td { background: var(--pf); }
.comparatif .col-conseille, .comparatif td:nth-child(3) { background: var(--color-bleu-voile) !important; }
.comparatif thead .col-conseille { background: var(--color-bleu-nuit) !important; color: var(--color-blanc); border-bottom-color: var(--color-bleu-nuit); }
.comparatif.trois .col-conseille, .comparatif.trois td:nth-child(3) { background: none !important; color: inherit; border-bottom-color: var(--color-encre); }
.comparatif.trois thead .col-conseille { background: none !important; }
.comparatif.trois tbody tr:nth-child(odd) th, .comparatif.trois tbody tr:nth-child(odd) td { background: var(--color-blanc); }
.comparatif.trois tbody tr, .comparatif.trois tbody th, .comparatif.trois tbody td { background: var(--color-blanc); }
.comparatif.trois tbody tr { border-bottom: 1px solid var(--color-bleu-clair); }
.comparatif.trois .est-negozimo th, .comparatif.trois .est-negozimo td { background: var(--color-bleu-voile); box-shadow: inset 0 -3px 0 var(--color-bleu); font-weight: 600; }
.comparatif.trois tbody th { width: 20%; }
.source { max-width: 46rem; margin-top: 1.2rem; font-size: var(--text-petit); font-weight: 600; line-height: 1.45; }

/* Téléphone : une fiche par ligne, sans défilement horizontal ; la structure du tableau reste annoncée (role) */
@media (max-width: 699px) {
  .comparatif, .comparatif tbody { display: block; }
  .comparatif thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .comparatif tbody tr { display: block; margin-bottom: 1rem; border: 0; background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-trait); }
  .comparatif tbody th { display: block; width: auto; padding: .8rem 1rem; background: var(--color-encre) !important; color: var(--color-blanc); }
  .comparatif tbody td { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: .8rem; padding: .65rem 1rem; background: none !important; border-top: 1px solid var(--color-trait); }
  .comparatif tbody td::before { content: attr(data-label); font-weight: 700; color: var(--color-galet); }
  .comparatif tbody td:nth-child(3) { background: var(--color-bleu-voile) !important; }
  .comparatif.trois tbody td, .comparatif.trois tbody td:nth-child(3) { background: none !important; }
  .comparatif.trois .est-negozimo { box-shadow: inset 0 0 0 3px var(--color-bleu); }
  .comparatif.trois .est-negozimo td, .comparatif.trois .est-negozimo th { box-shadow: none; }
  .comparatif.trois .est-negozimo th { background: var(--color-bleu) !important; }
  .comparatif.trois .est-negozimo td { background: var(--color-bleu-voile) !important; }
}

/* --- Blocs 4 et 5 : titre à gauche, texte à droite --- */
.grille.deux { align-items: start; }
@media (min-width: 900px) { .grille.deux { grid-template-columns: 5fr 7fr; } }
.grille.deux .chapo { max-width: 40rem; }
@media (max-width: 699px) { .comparatif.trois tbody th { width: auto; } }
.tete-page .lien { display: inline; }
.tete-page .lien .fleche { display: inline-block; vertical-align: -.15em; margin-left: .45rem; }
@media (max-width: 699px) {
  .comparatif.trois .est-negozimo { box-shadow: none; border: 3px solid var(--color-bleu); }
  .comparatif.trois .est-negozimo td, .comparatif.trois .est-negozimo td:nth-child(3) { background: var(--color-bleu-voile) !important; }
}