/* Silex · adaptations du site à la maquette finale. Écrit à la main (tools/site/porter-site-final.mjs le recopie),
 * chargé APRÈS la feuille de la page. Seulement ce que les écarts au portage demandent :
 * 1. Tarifs, Clarté pas encore en vente (réglage CLARTE_EN_VENTE = false) : « Bientôt disponible », sans lien.
 * 2. Tarifs, une matière : le choix de la matière dans la carte Éclat (la maquette le faisait à la page de paiement).
 * 3. Confidentialité : la politique complète du 10 octobre dans la colonne de la maquette.
 * 4. Tarifs : la grille simplifiée (pages.ts, grille) met Éclat en évidence.
 */

/* ── 1. Clarté, bientôt disponible ── */
.btn.bientot{cursor:default;pointer-events:none;opacity:.6}

/* ── 2. le choix de la matière ── */
.tf-o .tf-matiere{align-self:flex-start;margin:0 0 12px}
.tf-o .tf-matiere button{padding:7px 14px;font-size:14px}

/* ── 3. la politique complète ── */
.cf-texte h4{font-size:17px;margin:22px 0 8px}
.cf-texte .meta{margin:0 0 16px}
.cf-texte h3:first-of-type{margin-top:28px}

/* ── 4. Tarifs simplifiés (fondateur, 24 oct. 2026) : Éclat en évidence, puisque c'est lui qui se vend ── */
.tf-vedette{border:2px solid var(--ligne);background:linear-gradient(var(--teinte-bg),var(--surface) 46%);box-shadow:0 18px 44px rgba(10,58,69,.12)}
.tf-g .tf-prix{margin-bottom:18px}
.tf-g .tf-pour{min-height:0}
@media (min-width:900px){.tf-vedette{transform:translateY(-10px)}}
@media (max-width:640px){.tf-essai .tf-l{display:block}}

/* ── 5. Le bandeau des témoins (temoins.js, fondateur, 24 oct. 2026) : deux boutons de même poids ── */
.temoins{position:fixed;left:12px;right:12px;bottom:12px;z-index:1000;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;max-width:880px;margin:0 auto;padding:14px 16px;background:var(--surface);color:var(--texte);border:1px solid var(--bordure);border-radius:16px;box-shadow:0 12px 36px rgba(10,58,69,.18)}
.temoins[hidden]{display:none}
.temoins p{flex:1 1 320px;margin:0;font-size:14.5px;line-height:1.45;color:var(--texte-2)}
.temoins p a{color:var(--accent)}
.temoins-choix{display:flex;gap:10px;flex:0 0 auto}
.temoins-choix .btn{min-width:112px}