/* Comparatif sans HeyTia / avec HeyTia (18/10) : la colonne HeyTia en carte vert forêt */
.compare-section{max-width:1160px;margin:auto;padding:64px 7vw 64px}
.compare-heading{margin-bottom:32px}
.compare-heading h2{margin:0}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;font-size:17px;line-height:1.45;counter-reset:compare}
.compare-table thead th{padding:0 28px 18px;text-align:left;vertical-align:bottom;font-weight:400}
.compare-without-head{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#72596f}
.compare-with-head{background:var(--forest);color:var(--cream);border-radius:20px 20px 0 0;padding-top:24px!important}
.compare-head-small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:4px}
.compare-brand{display:flex;align-items:center;gap:10px;font:400 32px/1 var(--serif);letter-spacing:-.03em}
.compare-brand img{width:26px;height:auto;filter:brightness(0) invert(.94) sepia(.15)}
.compare-dot{color:#d9825f}
.compare-table tbody tr{counter-increment:compare}
.compare-table tbody th,.compare-table tbody td{border-top:1px solid var(--line);vertical-align:top}
.compare-table tbody th{padding:20px 24px 20px 0;text-align:left;font:400 27px/1.1 var(--serif);letter-spacing:-.02em}
.compare-table tbody th:before{content:counter(compare,decimal-leading-zero);display:block;margin-bottom:4px;font:500 11px/1 var(--sans);letter-spacing:.14em;color:var(--terra)}
.compare-without{padding:22px 28px;color:#2f382d99;font-size:16px}
.compare-with{padding:22px 28px;background:var(--forest);color:var(--cream);border-top-color:#f6eee226!important}
.compare-table tbody tr:last-child .compare-with{border-radius:0 0 20px 20px;padding-bottom:28px}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child .compare-without{border-bottom:1px solid var(--line)}
@media(min-width:760px){
 .compare-table{table-layout:fixed}
 .compare-table .compare-col-topic{width:20%}
 .compare-table thead th,.compare-table tbody th,.compare-table td{width:auto}
 .compare-with-head,.compare-with{box-shadow:0 0 0 0 transparent}
}
@media(max-width:759px){
 .compare-section{padding:44px 20px 40px}
 .compare-heading{margin-bottom:18px}
 .compare-table thead{display:none}
 .compare-table,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block;width:auto}
 .compare-table tbody tr{padding:16px 0;border-top:1px solid var(--line)}
 .compare-table tbody tr:last-child{border-bottom:1px solid var(--line)}
 .compare-table tbody th,.compare-table tbody td{border:0!important}
 .compare-table tbody th{padding:0 0 8px;font-size:25px}
 .compare-without{padding:0 0 10px;font-size:15px}
 .compare-with,.compare-table tbody tr:last-child .compare-with{padding:12px 14px;border-radius:12px;font-size:16px}
 .compare-without:before{content:"Sans HeyTia";display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#72596f;margin-bottom:2px}
 .compare-with:before{content:"Avec HeyTia";display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
}
/* Effets : apparition ligne par ligne, ancienne façon barrée, survol */
.compare-strike{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(var(--terra),var(--terra)) no-repeat 0 58%/0 1.5px;transition:background-size .7s var(--ease),color .5s}
.compare-armed tbody tr > *{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease),background-color .3s;transition-delay:var(--compare-delay)}
.compare-armed tbody tr .compare-with > *,.compare-armed tbody tr .compare-with{transition-delay:calc(var(--compare-delay) + 120ms)}
.compare-armed tbody tr .compare-with{transform:translateX(18px)}
.compare-armed tbody tr.compare-in > *{opacity:1;transform:none}
.compare-armed tbody tr.compare-in .compare-strike{background-size:100% 1.5px;transition-delay:calc(var(--compare-delay) + 450ms)}
.compare-table tbody tr:not(.compare-in) .compare-strike{transition-delay:0s}
@media(hover:hover) and (min-width:760px){
 .compare-table tbody tr:hover .compare-with{background:#3a4537}
 .compare-table tbody tr:hover th{color:var(--terra)}
 .compare-table tbody tr:hover .compare-without{color:#2f382dcc}
 .compare-armed tbody tr.compare-done > *{transition-delay:0s}
}
@media(prefers-reduced-motion:reduce){.compare-strike{background-size:100% 1.5px;transition:none}}
@media(max-width:759px){.compare-armed tbody tr .compare-with{transform:translateY(14px)}.compare-armed tbody tr.compare-in .compare-with{transform:none}}
