/* Test accueil : cas d'usage, outils, liberté du modèle, tarifs — 18/10/2026.
   Reprend les variables --ta-* de style.css (palette sombre). */

.ta-page .ta-center { text-align: center; max-width: 820px; margin: 0 auto; }
.ta-page .ta-center h2 { margin: 22px 0 0; }
.ta-page .ta-lead { max-width: 36em; margin: 24px auto 0; font-size: 18px; line-height: 1.65; color: var(--ta-muted); }
.ta-page .ta-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ta-page .ta-icon { width: 18px; height: 18px; flex: none; fill: currentColor; }
.ta-page .ta-mono { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 5px; background: var(--ta-line); font-size: 11px; font-style: normal; font-weight: 600; }
.ta-page .ta-cases, .ta-page .ta-tools, .ta-page .ta-free, .ta-page .ta-pricing { border-top: 1px solid var(--ta-line); }

/* ---------- Messageries ---------- */
.ta-page .ta-channels { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; margin: 34px 0 0; padding: 0; list-style: none; font-size: 14px; }
.ta-page .ta-channels li { display: inline-flex; align-items: center; gap: 9px; }
.ta-page .ta-channels .ta-channels-label { color: var(--ta-muted); }

/* ---------- Onglets des cas d'usage ---------- */
.ta-page .ta-tabs { display: none; }
.ta-js .ta-page .ta-tabs { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 60px auto 0; padding: 5px; border: 1px solid var(--ta-line); border-radius: 14px; background: var(--ta-surface); overflow-x: auto; scrollbar-width: none; }
.ta-page .ta-tabs::-webkit-scrollbar { display: none; }
.ta-page .ta-tabs button { flex: none; padding: 10px 16px; border: 0; border-radius: 10px; background: none; color: var(--ta-muted); font: inherit; font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.ta-page .ta-tabs button:hover { color: var(--ta-fg); }
.ta-page .ta-tabs button[aria-selected="true"] { background: var(--ta-fg); color: var(--ta-bg); }
.ta-page .ta-tabs button:focus-visible, .ta-page .ta-models button:focus-visible { outline: 2px solid var(--ta-green); outline-offset: 2px; }

.ta-page .ta-case { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; max-width: 1060px; margin: 60px auto 0; }
.ta-js .ta-page .ta-case[data-hidden] { display: none; }
.ta-js .ta-page .ta-case { margin-top: 50px; animation: ta-fade .35s ease both; }
@keyframes ta-fade { from { opacity: 0; transform: translateY(8px); } }
.ta-page .ta-case h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.04em; line-height: 1.15; }
.ta-page .ta-case-copy > p { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--ta-muted); }
.ta-page .ta-case-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 0; }
.ta-page .ta-case-split div { padding: 16px 18px; border: 1px solid var(--ta-line); border-radius: 12px; background: var(--ta-surface); }
.ta-page .ta-case-split dt { font-size: 12px; color: var(--ta-muted); }
.ta-page .ta-case-split dd { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.ta-page .ta-case-split div:last-child dt { color: var(--ta-green); }

/* Conversation d'exemple */
.ta-page .ta-chat { margin: 0; border: 1px solid var(--ta-line); border-radius: 18px; background: var(--ta-surface); overflow: hidden; }
.ta-page .ta-chat figcaption { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ta-line); font-size: 14px; }
.ta-page .ta-chat figcaption em { margin-left: auto; padding: 3px 9px; border: 1px solid var(--ta-line); border-radius: 20px; font-size: 11px; font-style: normal; color: var(--ta-muted); }
.ta-page .ta-chat ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px 18px 26px; list-style: none; }
.ta-page .ta-chat li { max-width: 82%; padding: 11px 15px; border-radius: 16px 16px 16px 4px; background: var(--ta-raised); font-size: 14px; line-height: 1.5; }
.ta-page .ta-chat li.is-you { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: #1f3a27; color: #eaf7ec; }
.ta-js .ta-page .ta-case:not([data-hidden]) .ta-chat li { animation: ta-fade .4s ease both; }
.ta-js .ta-page .ta-chat li:nth-child(2) { animation-delay: .25s; }
.ta-js .ta-page .ta-chat li:nth-child(3) { animation-delay: .5s; }
.ta-js .ta-page .ta-chat li:nth-child(4) { animation-delay: .75s; }

/* ---------- Outils compatibles ---------- */
.ta-page .ta-tool-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 55px auto 0; padding: 0; list-style: none; }
.ta-page .ta-tool-grid li { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--ta-line); border-radius: 12px; background: var(--ta-surface); font-size: 14px; transition: border-color .2s; }
.ta-page .ta-tool-grid li:hover { border-color: #45454d; }

/* ---------- Liberté du modèle ---------- */
.ta-page .ta-free-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; max-width: 1000px; margin: 60px auto 0; }
.ta-page .ta-free-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--ta-line); border-radius: 18px; background: var(--ta-surface); }
.ta-page .ta-free-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 15px; }
.ta-page .ta-free-head span { font-size: 13px; color: var(--ta-muted); }
.ta-page .ta-free-head b { font-weight: 500; color: var(--ta-green); }
.ta-page .ta-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.ta-page .ta-models button { padding: 14px 12px; border: 1px solid var(--ta-line); border-radius: 11px; background: var(--ta-bg); color: var(--ta-fg); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: border-color .2s; }
.ta-page .ta-models button:hover { border-color: #45454d; }
.ta-page .ta-models button[aria-pressed="true"] { border-color: var(--ta-fg); }
.ta-page .ta-models button[aria-pressed="true"]::after { content: "✓"; float: right; color: var(--ta-green); }
.ta-page .ta-keep { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; }
.ta-page .ta-keep li { display: flex; gap: 12px; }
.ta-page .ta-keep li::before { content: "✓"; color: var(--ta-green); }
.ta-page .ta-free-note { margin-top: auto; padding-top: 22px; font-size: 13px; line-height: 1.6; color: var(--ta-muted); }

/* ---------- Tarifs ---------- */
.ta-page .ta-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1180px; margin: 60px auto 0; }
.ta-page .ta-plan { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--ta-line); border-radius: 22px; background: var(--ta-surface); }
.ta-page .ta-plan.is-featured { border-color: #45454d; background: var(--ta-raised); }
.ta-page .ta-plan header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ta-page .ta-plan h3 { font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.ta-page .ta-badge { padding: 4px 11px; border-radius: 20px; background: var(--ta-fg); color: var(--ta-bg); font-size: 12px; }
.ta-page .ta-plan-pitch { margin-top: 12px; font-size: 15px; }
.ta-page .ta-plan-for { margin-top: 6px; font-size: 13px; color: var(--ta-muted); }
.ta-page .ta-plan-price { margin-top: 28px; font-size: 15px; color: var(--ta-muted); }
.ta-page .ta-plan-price strong { margin-right: 6px; font-size: clamp(42px, 4vw, 56px); white-space: nowrap; font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--ta-fg); }
.ta-page .ta-plan-model { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--ta-muted); }
.ta-page .ta-plan-cta { display: block; margin-top: 24px; padding: 14px; border: 1px solid #45454d; border-radius: 12px; text-align: center; font-size: 14px; font-weight: 500; transition: background .2s; }
.ta-page .ta-plan-cta:hover { background: var(--ta-raised); }
.ta-page .ta-plan.is-featured .ta-plan-cta { border-color: var(--ta-fg); background: var(--ta-fg); color: var(--ta-bg); }
.ta-page .ta-plan.is-featured .ta-plan-cta:hover { background: #d7d7dd; }
.ta-page .ta-plan-list { display: grid; gap: 11px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
.ta-page .ta-plan-list li { display: flex; gap: 12px; }
.ta-page .ta-plan-list li::before { content: "✓"; color: var(--ta-green); }
.ta-page .ta-plan-plus { margin-top: 28px; font-size: 13px; color: var(--ta-muted); }
.ta-page .ta-plan-tiles { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ta-page .ta-plan-tiles li { padding: 12px 14px; border: 1px solid var(--ta-line); border-radius: 11px; background: var(--ta-bg); font-size: 13px; line-height: 1.4; }
.ta-page .ta-plan-example { margin-top: auto; padding-top: 22px; border-top: 1px dashed var(--ta-line); font-size: 13px; color: var(--ta-muted); }
.ta-page .ta-plan-list + .ta-plan-example, .ta-page .ta-plan-tiles + .ta-plan-example { margin-top: 28px; }
.ta-page .ta-pricing-note { margin-top: 26px; text-align: center; font-size: 12px; color: var(--ta-muted); }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .ta-page .ta-case { grid-template-columns: 1fr; gap: 34px; }
  .ta-page .ta-free-grid, .ta-page .ta-plans { grid-template-columns: 1fr; }
  .ta-page .ta-plans { max-width: 560px; }
}
@media (max-width: 700px) {
  .ta-page .ta-lead { font-size: 16px; }
  .ta-js .ta-page .ta-tabs { width: auto; margin-top: 40px; }
  .ta-page .ta-case-split { grid-template-columns: 1fr; }
  .ta-page .ta-chat li { max-width: 90%; }
  .ta-page .ta-tool-grid { margin-top: 40px; gap: 8px; }
  .ta-page .ta-tool-grid li { padding: 9px 13px; font-size: 13px; }
  .ta-page .ta-models { grid-template-columns: repeat(2, 1fr); }
  .ta-page .ta-free-card, .ta-page .ta-plan { padding: 22px; }
  .ta-page .ta-plan-tiles { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
  /* Prix alignés d'une carte à l'autre : accroche et public sur deux lignes max. */
  .ta-page .ta-plan-pitch, .ta-page .ta-plan-pitch + .ta-plan-for { min-height: 3em; }
}

/* Maintenance mensuelle, sous les forfaits */
.ta-page .ta-maintenance { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 30px; align-items: center; max-width: 1180px; margin: 18px auto 0; padding: 28px 32px; border: 1px solid var(--ta-line); border-radius: 22px; background: var(--ta-surface); }
.ta-page .ta-maintenance h3 { font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.ta-page .ta-maintenance > div p { margin-top: 8px; font-size: 14px; color: var(--ta-muted); }
.ta-page .ta-maintenance ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ta-page .ta-maintenance li { display: flex; gap: 10px; }
.ta-page .ta-maintenance li::before { content: "✓"; color: var(--ta-green); }
.ta-page .ta-maintenance .ta-plan-price { margin: 0; white-space: nowrap; }
.ta-page .ta-maintenance .ta-plan-price strong { font-size: clamp(34px, 3vw, 44px); }
@media (max-width: 900px) {
  .ta-page .ta-maintenance { grid-template-columns: 1fr; gap: 20px; max-width: 560px; padding: 24px; }
}
@media (max-width: 700px) {
  .ta-page .ta-maintenance ul { grid-template-columns: 1fr; }
}
.ta-page .ta-option { display: inline-block; margin-left: 10px; padding: 3px 10px; border: 1px solid var(--ta-line); border-radius: 20px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--ta-muted); vertical-align: middle; }
.ta-page .ta-plan-maint { margin-top: 10px; font-size: 13px; color: var(--ta-muted); }
.ta-page .ta-plan-maint strong { font-weight: 500; color: var(--ta-fg); }
.ta-page .ta-maint-prices { display: grid; gap: 6px; font-size: 14px; color: var(--ta-muted); white-space: nowrap; }
.ta-page .ta-maint-prices strong { font-size: 20px; font-weight: 500; color: var(--ta-fg); }

/* FAQ par thème */
.ta-page .ta-faq-group { margin: 34px 0 6px; font-size: 13px; font-weight: 500; color: var(--ta-green); }
.ta-page .ta-faq-group:first-child { margin-top: 0; }

/* Logos des modèles dans la carte Ton agent. */
.ta-page .ta-models button { display: flex; align-items: center; gap: 9px; }
.ta-page .ta-models .ta-icon { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; }
.ta-page .ta-models button[aria-pressed="true"]::after { float: none; margin-left: auto; }

/* Pied de page : liens légaux (seulement les pages publiées) */
.ta-page .ta-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; font-size: 12px; }
.ta-page .ta-legal a { color: var(--ta-muted); }
.ta-page .ta-legal a:hover { color: var(--ta-fg); }

/* Pastille de réservation : après le hero, masquée sur les tarifs, le contact et le pied de page */
.ta-page .ta-pill { position: fixed; left: 50%; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 16px; padding: 7px 7px 7px 20px; border: 1px solid #45454d; border-radius: 40px; background: rgba(18,18,20,.94); backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0,0,0,.45); font-size: 14px; white-space: nowrap; transform: translate(-50%, 140%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.ta-page .ta-pill.is-on { transform: translate(-50%, 0); opacity: 1; }
.ta-page .ta-pill strong { font-weight: 500; }
.ta-page .ta-pill a { padding: 10px 18px; border-radius: 30px; background: var(--ta-fg); color: var(--ta-bg); font-weight: 500; }
.ta-page .ta-pill a:hover { background: #d7d7dd; }
.ta-page .ta-pill button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--ta-muted); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.ta-page .ta-pill button:hover { color: var(--ta-fg); background: var(--ta-raised); }
.ta-page .ta-pill a:focus-visible, .ta-page .ta-pill button:focus-visible { outline: 2px solid var(--ta-green); outline-offset: 2px; }
@media (max-width: 700px) {
  .ta-page .ta-legal { margin-left: 0; width: 100%; order: 4; }
  .ta-page .ta-pill { left: 16px; right: 16px; bottom: 12px; gap: 10px; padding-left: 16px; font-size: 13px; transform: translateY(140%); }
  .ta-page .ta-pill.is-on { transform: none; }
  .ta-page .ta-pill > span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .ta-page .ta-pill a { padding: 9px 14px; }
}
@media (max-width: 420px) {
  .ta-page .ta-pill a span, .ta-page .ta-pill-lead { display: none; }
  .ta-page .ta-pill > span::first-letter { text-transform: uppercase; }
}
.ta-page .ta-pill[hidden] { display: none; }
/* La frise des heures (bas de la nuit épinglée) remonte au-dessus de la pastille. */
.ta-page .rh-night-sticky { padding-bottom: 84px; }
@media (max-width: 700px) {
  .ta-page .rh-night-sticky { padding-bottom: 74px; }
}

/* Option e-mail à côté de « Réserver un appel gratuit » (affichée seulement si RICHA_CONTACT_EMAIL est rempli) */
.ta-page .ta-plan-mail { display: block; margin-top: 12px; text-align: center; font-size: 13px; color: var(--ta-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #45454d; }
.ta-page .ta-plan-mail:hover { color: var(--ta-fg); }
.ta-page .ta-contact .ta-button-ghost { margin-left: 12px; background: transparent; color: var(--ta-fg); border-color: #45454d; }
.ta-page .ta-contact .ta-button-ghost:hover { background: var(--ta-raised); color: var(--ta-fg); border-color: #45454d; }
@media (max-width: 520px) {
  .ta-page .ta-contact .ta-button-ghost { margin-left: 0; margin-top: 12px; }
}

/* Newsletter : bandeau sobre avant le pied de page, sous le bloc de réservation (accueil français seulement). */
.ta-page .ta-newsletter { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 24px 60px; align-items: start; max-width: 1160px; margin: 0 auto 70px; padding: 34px 40px; border: 1px solid var(--ta-line); border-radius: 18px; background: var(--ta-surface); }
.ta-page .ta-newsletter h2 { font-size: 24px; font-weight: 500; letter-spacing: -.03em; line-height: 1.25; }
.ta-page .ta-newsletter-copy p { margin-top: 10px; max-width: 30em; font-size: 15px; line-height: 1.6; color: var(--ta-muted); }
.ta-page .ta-newsletter-row { display: flex; gap: 10px; }
.ta-page .ta-newsletter-row input { flex: 1; min-width: 0; padding: 12px 18px; border: 1px solid #45454d; border-radius: 30px; background: var(--ta-bg); color: var(--ta-fg); font: inherit; font-size: 14px; }
.ta-page .ta-newsletter-row input::placeholder { color: #75757e; }
.ta-page .ta-newsletter-row input:focus-visible { outline: 2px solid var(--ta-green); outline-offset: 2px; }
.ta-page .ta-newsletter-row button { padding: 12px 22px; border: 0; border-radius: 30px; background: var(--ta-fg); color: var(--ta-bg); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.ta-page .ta-newsletter-row button:hover { background: #d7d7dd; }
.ta-page .ta-newsletter-row button:focus-visible { outline: 2px solid var(--ta-green); outline-offset: 2px; }
.ta-page .ta-newsletter-row button[disabled] { opacity: .6; cursor: wait; }
.ta-page .ta-newsletter-status:empty { display: none; }
.ta-page .ta-newsletter-status { margin-top: 12px; font-size: 14px; color: var(--ta-fg); }
.ta-page .ta-newsletter-status[data-status="confirmee"], .ta-page .ta-newsletter-status[data-status="envoye"] { color: var(--ta-green); }
.ta-page .ta-newsletter-status[data-status="invalide"], .ta-page .ta-newsletter-status[data-status="erreur"], .ta-page .ta-newsletter-status[data-status="limite"] { color: #ff8a80; }
.ta-page .ta-newsletter-note { margin-top: 12px; font-size: 12px; color: var(--ta-muted); }
.ta-page .ta-newsletter-note a { color: var(--ta-fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #5a5a62; }
.ta-page .ta-newsletter-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 1240px) {
  .ta-page .ta-newsletter { margin-left: 40px; margin-right: 40px; }
}
@media (max-width: 800px) {
  .ta-page .ta-newsletter { grid-template-columns: 1fr; margin: 0 24px 50px; padding: 26px 22px; }
}
@media (max-width: 420px) {
  .ta-page .ta-newsletter-row { flex-direction: column; }
}