/* Tableau comparatif des formules (accueil + page « Création de site internet »).
   Généré par tools/offres.py ; les variables de couleur viennent de la page. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tarifs { max-width: 980px; margin: 0 auto; }
.tarifs__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 30px 80px rgba(0,0,0,0.06); }
.tarifs__table th, .tarifs__table td { padding: 1rem 1.5rem; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--border); font-weight: 400; }
.tarifs__table tbody th, .tarifs__table tfoot th { text-align: left; font-size: 0.9375rem; color: var(--text); font-weight: 600; }
.tarifs__table tbody th small, .tarifs__table tfoot th small { display: block; margin-top: 0.15rem; font-size: 0.8rem; font-weight: 400; color: var(--text-tertiary); }
.tarifs__col-label { width: 44%; }

/* En-têtes des formules */
.tarifs__coin { text-align: left !important; vertical-align: bottom !important; padding: 2rem 1.5rem 1.5rem !important; }
.tarifs__coin span { display: block; font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; color: var(--text); }
.tarifs__coin small { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--text-tertiary); }
.tarifs__plan { position: relative; padding: 2.25rem 1.25rem 1.5rem !important; vertical-align: top !important; }
.tarifs__nom { display: block; font-size: 1.25rem; font-weight: 800; color: var(--text); }
.tarifs__pour { display: block; min-height: 2.6em; margin-top: 0.25rem; font-size: 0.82rem; line-height: 1.3; color: var(--text-tertiary); }
.tarifs__prix { display: flex; align-items: baseline; justify-content: center; gap: 0.2rem; margin: 0.9rem 0 1.1rem; }
.tarifs__montant { font-family: var(--serif); font-size: 3.25rem; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.tarifs__euro { font-family: var(--serif); font-size: 1.75rem; color: var(--text); }
.tarifs__periode { font-size: 0.9rem; font-weight: 600; color: var(--text-tertiary); }
.tarifs__badge { position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%); white-space: nowrap; background: linear-gradient(110deg, var(--accent) 0%, var(--accent-light) 45%, #FFD2BF 50%, var(--accent-light) 55%, var(--accent) 100%); background-size: 250% 100%; color: #fff; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.4rem 0.95rem; border-radius: 100px; box-shadow: 0 6px 18px rgba(232,97,45,0.35); animation: tarifs-brille 3.5s linear infinite; }

/* Colonne Pro mise en avant */
.tarifs__pro { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
thead .tarifs__pro { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 2px 0 var(--accent); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
tfoot .tarifs__pro { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.tarifs__pro .tarifs__montant, .tarifs__pro .tarifs__euro { color: var(--accent); }

/* Cellules */
.tarifs__oui { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-soft); color: var(--teal, #2A9D8F); }
.tarifs__oui svg { width: 15px; height: 15px; }
.tarifs__pro .tarifs__oui { background: var(--accent); color: #fff; }
.tarifs__non { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--border-strong); vertical-align: middle; }
.tarifs__val { font-weight: 700; font-size: 0.9375rem; color: var(--text); }
.tarifs__pro .tarifs__val { color: var(--accent); }
.tarifs__table tfoot th, .tarifs__table tfoot td { border-bottom: 0; padding-top: 1.25rem; padding-bottom: 1.75rem; }
.tarifs__apres { font-size: 0.85rem; color: var(--text-tertiary); }
.tarifs__apres strong { color: var(--text); white-space: nowrap; }

/* Boutons */
.tarifs__btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; max-width: 210px; padding: 0.85rem 1rem; border-radius: 100px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--border-strong); color: var(--text); background: var(--bg-card); transition: transform 0.3s var(--ease-spring), border-color 0.3s, color 0.3s, box-shadow 0.3s; }
.tarifs__btn svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease-spring); }
.tarifs__btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.tarifs__btn:hover svg { transform: translateX(4px); }
.tarifs__btn--pro { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 25px rgba(232,97,45,0.3); }
.tarifs__btn--pro:hover { color: #fff; background: var(--accent-hover); box-shadow: 0 14px 32px rgba(232,97,45,0.4); }
.tarifs__btn--pro::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-20deg); animation: tarifs-reflet 4s ease-in-out infinite; }

/* Survol des lignes */
.tarifs__table tbody tr { transition: background 0.25s; }
.tarifs__table tbody tr:hover th, .tarifs__table tbody tr:hover td:not(.tarifs__pro) { background: var(--bg-soft); }
.tarifs__table tbody tr:hover .tarifs__pro { background: var(--accent-glow); }
.tarifs__table tbody tr:hover .tarifs__oui { transform: scale(1.15); }
.tarifs__oui { transition: transform 0.3s var(--ease-spring); }

/* Animations d'apparition (la classe .visible est posée par le script de révélation) */
.tarifs.anim tbody tr, .tarifs.anim tfoot tr { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), background 0.25s; transition-delay: calc(var(--i, 0) * 70ms + 200ms), calc(var(--i, 0) * 70ms + 200ms), 0s; }
.tarifs.anim.visible tbody tr, .tarifs.anim.visible tfoot tr { opacity: 1; transform: none; }
.tarifs.anim .tarifs__oui { transform: scale(0); }
.tarifs.anim.visible .tarifs__oui { animation: tarifs-pop 0.5s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms + 350ms); }
.tarifs.anim.visible tbody tr:hover .tarifs__oui { animation: none; transform: scale(1.15); }
.tarifs.visible thead .tarifs__pro { animation: tarifs-halo 3s ease-in-out 1s infinite; }

@keyframes tarifs-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes tarifs-brille { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes tarifs-reflet { 0%, 60% { left: -75%; } 100% { left: 130%; } }
@keyframes tarifs-halo { 0%, 100% { filter: drop-shadow(0 0 0 rgba(232,97,45,0)); } 50% { filter: drop-shadow(0 -6px 14px rgba(232,97,45,0.25)); } }

@media (max-width: 768px) {
    .tarifs__table { border-radius: var(--radius-lg); }
    .tarifs__col-label { width: 38%; }
    .tarifs__table th, .tarifs__table td { padding: 0.8rem 0.5rem; }
    .tarifs__table tbody th, .tarifs__table tfoot th { font-size: 0.8125rem; padding-left: 0.9rem; }
    .tarifs__table tbody th small, .tarifs__table tfoot th small { font-size: 0.72rem; }
    .tarifs__long { display: none; }
    .tarifs__coin { padding: 1.5rem 0.9rem 1rem !important; }
    .tarifs__coin span { font-size: 1.05rem; }
    .tarifs__coin small { display: none; }
    .tarifs__plan { padding: 1.9rem 0.4rem 1.1rem !important; }
    .tarifs__nom { font-size: 1rem; }
    .tarifs__pour { display: none; }
    .tarifs__prix { margin: 0.5rem 0 0.8rem; }
    .tarifs__montant { font-size: 2.2rem; }
    .tarifs__euro { font-size: 1.2rem; }
    .tarifs__periode { font-size: 0.72rem; }
    .tarifs__badge { font-size: 0.58rem; padding: 0.3rem 0.6rem; letter-spacing: 0.06em; }
    .tarifs__btn { padding: 0.7rem 0.5rem; font-size: 0.68rem; letter-spacing: 0.02em; }
    .tarifs__btn svg { display: none; }
    .tarifs__val { font-size: 0.8125rem; }
    .tarifs__apres { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tarifs.anim tbody tr, .tarifs.anim tfoot tr { opacity: 1; transform: none; transition: none; }
    .tarifs.anim .tarifs__oui { transform: none; animation: none !important; }
    .tarifs__badge, .tarifs__btn--pro::after, .tarifs.visible thead .tarifs__pro { animation: none; }
}