/* La page Tarifs (micro-lot P1 ; plan docs/lot-site-vitrine-v10-20261023/P1/PLAN-P1-v2.md, § 2.4) : le grand titre, les deux offres
   Multimodal combinées dans l'encart du tableau, l'achat en cours et son message ; préfixe p1-. Couleurs : les noms courts du commun
   (jetons). Le tableau lui-même garde sa feuille, celle de l'accueil (css/s5-tarifs.css). */
.p1-tete { padding-top: 48px; }
.p1-tete h1 { margin: 0; font-size: 40px; line-height: 1.15; font-weight: 300; letter-spacing: -0.03em; }
/* sous le grand titre, le tableau suit de près (sur l'accueil : l'espace entre deux sections) ; une arrivée par l'ancre #tarifs
   (« Souscrire » de l'accueil, liens d'achat de l'appli) ouvre la page en haut, grand titre visible */
.p1-tete ~ #tarifs { margin-top: 32px; scroll-margin-top: 100vh; }
@media (min-width: 744px) { .p1-tete { padding-top: 64px; } .p1-tete h1 { font-size: 56px; } .p1-tete ~ #tarifs { margin-top: 48px; } }
/* les deux offres combinées, clonées dans l'encart « Module Multimodal » : toute la largeur de sa grille, l'avis d'abord ; côte
   à côte, l'une sous l'autre sous 558 px */
#tarifs .option .p1-combinees { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--grille); }
#tarifs .option .p1-avis { grid-column: 1 / -1; max-width: 72ch; margin: 0; font-size: 15px; line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }
#tarifs .p1-offre { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
#tarifs .p1-offre h4 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
#tarifs .p1-total { font-size: 24px; line-height: 32px; }
#tarifs .p1-total small { display: block; font-size: 13px; line-height: 18px; color: var(--encre-3); }
#tarifs .p1-offre .btn.borde:hover { background: var(--brume); }
@media (max-width: 557px) { #tarifs .option .p1-combinees { grid-template-columns: minmax(0, 1fr); } }
/* l'achat en cours : le bouton le dit lui-même (« Ouverture du paiement… »), au fond de la grille comme un bouton désactivé (charte,
   Composants) */
#tarifs [data-achat][aria-disabled="true"] { background: var(--grille); color: var(--encre-3); box-shadow: none; cursor: progress; }
/* le message d'un achat qui ne démarre pas, DANS le bloc du bouton (après lui, il couvrait le bouton) : la structure des messages
   de la section 7 (charte, Messages), copie courte ; vide, la zone reste dans l'arbre lu sans prendre de place */
#tarifs .p1-retour:empty { position: absolute; }
#tarifs .p1-retour .message { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; margin-top: 8px; padding: 12px 16px; border: 1px solid var(--cramoisi); border-radius: 8px; background: var(--feuille); font-size: 15px; line-height: 1.5; text-align: left; }
#tarifs .p1-retour .icone { width: 16px; height: 16px; margin-top: 4px; color: var(--cramoisi); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#tarifs .p1-retour .texte { grid-column: 2; margin: 0; color: var(--encre-2); text-wrap: pretty; overflow-wrap: anywhere; }
/* couleurs forcées : l'ombre intérieure des boutons bordés disparaît, un vrai bord la remplace (comme ceux des cartes) */
@media (forced-colors: active) {
  #tarifs .p1-offre .btn { border: 2px solid ButtonText; }
  #tarifs .p1-retour .message { border-color: CanvasText; }
  #tarifs [data-achat][aria-disabled="true"] { border: 2px solid GrayText; color: GrayText; }
}
/* les liens d'un message se coupent comme le texte : la règle des liens de l'encart (une seule ligne) ne les tient pas */
#tarifs .p1-retour .texte .lien { white-space: normal; }
/* dans les deux encarts, de même hauteur, le contenu reste en haut de sa case */
#tarifs .options .option { align-content: start; }
/* un bouton de l'encart sur deux lignes garde 8 px au-dessus et au-dessous de son texte */
#tarifs .p1-offre .btn { padding-block: 8px; }