/* Tarifs en trois plans (carte centrale mise en avant) et questions fréquentes. */
.section-tarifs .intro { max-width: 56ch; }
.plans { display: grid; gap: 40px; margin-top: 56px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 36px 28px 28px; border: 1px solid var(--trait); border-radius: 20px; background: var(--fond); box-shadow: var(--ombre-douce); transition: translate 200ms ease-out, box-shadow 200ms, border-color 200ms; }
.plan:hover { translate: 0 -6px; box-shadow: var(--ombre); }
.plan-vedette { border: 2px solid var(--marque); background: var(--surface); box-shadow: var(--ombre); }
.plan-vedette:hover { border-color: var(--marque); }
.plan-badge { position: absolute; top: 0; left: 50%; translate: -50% -50%; padding: 4px 14px; border-radius: 999px; background: var(--marque); color: var(--sur-marque); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.plan-badge-neutre { background: var(--surface-2); color: var(--texte); border: 1px solid var(--trait); }
.plan-nom { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marque-texte); }
.plan-prix { display: flex; align-items: center; min-height: 3.75rem; margin-top: 8px; font-size: 3.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.plan-prix-texte { font-size: 1.625rem; letter-spacing: -0.02em; }
.plan-sous { min-height: 3em; margin-top: 4px; color: var(--texte-attenue); }
.plan-bouton { width: 100%; margin: 20px 0 28px; white-space: normal; text-align: center; }
.plan-lignes { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--trait); }
.ligne { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 10px; line-height: 1.4; }
.ligne .ic { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--marque-texte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ligne-non { color: var(--texte-attenue); }
.ligne-non .ic { stroke: var(--neutre-point); }
.ligne-non .ligne-texte { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--texte-attenue) 50%, transparent); }
.puce { padding: 1px 8px; border-radius: 999px; background: var(--teinte); color: var(--marque-texte); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.plans-note { margin-top: 40px; text-align: center; color: var(--texte-attenue); }
@media (prefers-reduced-motion: no-preference) {
  .js .plan[data-reveal] { transition: opacity 600ms ease-out, transform 600ms ease-out, translate 200ms ease-out, box-shadow 200ms; }
  .js .plan[data-reveal].est-visible { transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .plan:hover { translate: none; } }
@media (min-width: 1024px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .plan-vedette { translate: 0 -14px; padding-top: 44px; }
  .plan-vedette:hover { translate: 0 -20px; }
}


.faq-grille { display: grid; gap: 40px; }
.faq-liste details { border-top: 1px solid var(--trait); }
.faq-liste details:last-of-type { border-bottom: 1px solid var(--trait); }
.faq-liste summary { position: relative; min-height: 44px; padding: 18px 40px 18px 0; font-size: 1.0625rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-size: 1.5rem; font-weight: 400; color: var(--marque-texte); transition: rotate 200ms; }
.faq-liste details[open] summary::after { rotate: 45deg; }
.faq-liste details p { max-width: 64ch; padding: 0 40px 22px 0; color: var(--texte-attenue); }
@media (min-width: 960px) { .faq-grille { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; } .faq-grille h2 { position: sticky; top: 120px; align-self: start; } }