/* Copie légère de /assets/tools.css (commentaires retirés) — tools/prod-css-purge.mjs — source-sha1:5acc934fed74010344373be2068e300d6d6993f7 — ne pas éditer, relancer l'outil. */
.tool{--tl-burgundy: var(--burgundy, #7B2D3B);
    --tl-burgundy-dark: var(--burgundy-dark, #5E1F2C);
    --tl-charcoal: var(--charcoal, #2D3436);
    --tl-green: var(--green-dark, #1F6B45);
    --tl-gray50: var(--gray-50, #F5F2ED);
    --tl-gray200: var(--gray-200, #E5E7EB);
    --tl-gray500: var(--gray-500, #6B7280);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Inter Fallback', system-ui, sans-serif;
    background: #fff;
    border: 1px solid var(--tl-gray200);
    border-radius: 18px;
    padding: clamp(20px, 4vw, 30px);
    margin: 28px 0;
    box-shadow: 0 10px 34px rgba(45,52,54,0.07);
    max-width: 720px;
    contain: content;}
.tool *{box-sizing: border-box;}
.tool-head{display: flex; align-items: center; gap: 12px; margin-bottom: 4px;}
.tool-badge{display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--tl-burgundy); background: var(--burgundy-pale, #F5EAEC);
    padding: 6px 12px; border-radius: 999px;}
.tool-title{font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
    font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 600; color: var(--tl-charcoal);
    margin: 10px 0 6px; line-height: 1.2;}
.tool-intro{color: var(--tl-gray500); font-size: 0.96rem; line-height: 1.5; margin: 0 0 20px;}
.tool-field{margin-bottom: 20px;}
.tool-label{display: block; font-weight: 500; color: var(--tl-charcoal); margin-bottom: 10px; font-size: 0.98rem;}
.tool-label .hint{font-weight: 400; color: var(--tl-gray500); font-size: 0.85rem;}
.tool-seg{display: flex; flex-wrap: wrap; gap: 8px;}
.tool-seg button{flex: 1 1 auto; min-width: 60px;
    font: inherit; font-weight: 500; font-size: 0.95rem;
    padding: 11px 14px; border-radius: 11px; cursor: pointer;
    background: var(--tl-gray50); color: var(--tl-charcoal);
    border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s;}
.tool-seg button:hover{border-color: rgba(123,45,59,0.3);}
.tool-seg button[aria-pressed="true"]{background: var(--tl-burgundy); color: #fff; border-color: var(--tl-burgundy);
    box-shadow: 0 4px 14px rgba(123,45,59,0.28);}
.tool-range-row{display: flex; align-items: center; gap: 16px;}
.tool-range-row input[type="range"]{flex: 1; min-width: 0; accent-color: var(--tl-burgundy); height: 6px;}
.tool-num{width: 96px; text-align: center; font: inherit; font-weight: 600; font-size: 1.05rem;
    color: var(--tl-burgundy); padding: 9px 8px; border: 1.5px solid var(--tl-gray200);
    border-radius: 10px; background: #fff;}
.tool-num:focus,.tool-seg button:focus-visible,.tool select:focus{outline: 2px solid var(--tl-burgundy); outline-offset: 2px;}
.tool select{width: 100%; font: inherit; font-size: 0.98rem; padding: 11px 12px;
    border: 1.5px solid var(--tl-gray200); border-radius: 11px; background: #fff; color: var(--tl-charcoal);}
.tool-out{background: linear-gradient(135deg, #fff 0%, var(--tl-gray50) 100%);
    border: 1px solid var(--tl-gray200); border-radius: 14px; padding: 20px; margin-top: 6px;}
.tool-out-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px;}
.tool-stat{text-align: center; padding: 6px 4px;}
.tool-stat .v{font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-weight: 600;
    font-size: clamp(1.6rem, 5vw, 2.1rem); color: var(--tl-burgundy); line-height: 1;}
.tool-stat .v.up{color: #B4232F;}
.tool-stat .v.down,.tool-stat .v.ok{color: var(--tl-green);}
.tool-stat .k{font-size: 0.78rem; color: var(--tl-gray500); margin-top: 8px; font-weight: 450; line-height: 1.3;}
.tool-verdict{font-size: 1.02rem; font-weight: 500; color: var(--tl-charcoal);
    padding: 4px 2px 14px; line-height: 1.45;}
.tool-verdict.ok{color: var(--tl-green);}
.tool-verdict.warn{color: #B4232F;}
.tool-note{font-size: 0.82rem; color: var(--tl-gray500); line-height: 1.5; margin: 14px 0 0;}
.tool-cta{display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    background: var(--tl-burgundy); color: #fff; text-decoration: none; font-weight: 600;
    padding: 13px 26px; border-radius: 11px; transition: background .15s, transform .15s;}
.tool-cta:hover{background: var(--tl-burgundy-dark); transform: translateY(-1px);}
.tool-disclaimer{display: flex; gap: 8px; font-size: 0.8rem; color: var(--tl-gray500);
    margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--tl-gray200); line-height: 1.5;}
@media (prefers-reduced-motion: reduce){
.tool-cta,.tool-seg button{transition: none;}
}
.engage-card,.engage-cap{--e-burgundy: var(--burgundy, #7B2D3B);
    --e-burgundy-dark: var(--burgundy-dark, #5E1F2C);
    --e-charcoal: var(--charcoal, #2D3436);
    --e-gray200: var(--gray-200, #E5E7EB);
    --e-gray500: var(--gray-500, #6B7280);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Inter Fallback', system-ui, sans-serif;
    box-sizing: border-box;}
.engage-card *,.engage-cap *{box-sizing: border-box;}
.engage-card{position: relative; overflow: hidden;
    background: linear-gradient(135deg, #FFFFFF 0%, #FDF8F4 100%);
    border: 1px solid var(--e-gray200);
    border-radius: 20px; padding: clamp(22px, 4vw, 30px); margin: 38px 0;
    box-shadow: 0 14px 38px rgba(45,52,54,0.08); max-width: 760px;
    transition: box-shadow .3s ease, border-color .3s ease;}
.engage-card::before{content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 5px;
    background: linear-gradient(180deg, var(--e-burgundy) 0%, var(--burgundy-light, #9E4A5A) 100%);}
.engage-card::after{content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
    border-radius: 50%; background: radial-gradient(circle, rgba(123,45,59,0.09) 0%, rgba(123,45,59,0) 70%);
    pointer-events: none;}
.engage-card > *{position: relative;}
.engage-q-tag{display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--e-burgundy); background: var(--burgundy-pale, #F5EAEC);
    border: 1px solid rgba(123,45,59,0.12); border-radius: 999px;
    padding: 6px 14px; margin-bottom: 14px;}
.engage-q-dot{width: 6px; height: 6px; border-radius: 50%; background: var(--e-burgundy); flex-shrink: 0;
    animation: engage-blink 2.4s ease-in-out infinite;}
@keyframes engage-blink{ 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.engage-q{font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
    font-size: clamp(1.2rem, 2.8vw, 1.5rem); font-weight: 600; color: var(--e-charcoal);
    line-height: 1.35; margin: 0 0 20px;}
.engage-opts{display: flex; flex-wrap: wrap; gap: 12px;}
.engage-opt{flex: 1 1 auto; min-width: 46%; text-align: center; font: inherit; font-size: 1.02rem; font-weight: 600;
    color: var(--e-charcoal); background: #fff; border: 1.5px solid var(--e-gray200);
    border-radius: 13px; padding: 15px 18px; cursor: pointer;
    transition: border-color .18s, background .18s, color .18s, transform .12s, box-shadow .18s;}
.engage-opt:hover{border-color: var(--e-burgundy); background: var(--e-burgundy); color: #fff;
    box-shadow: 0 8px 20px rgba(123,45,59,0.24);}
.engage-opt.no:hover{background: var(--green, #2D8B5E); border-color: var(--green, #2D8B5E); box-shadow: 0 8px 20px rgba(45,139,94,0.24);}
.engage-opt:active{transform: scale(0.98);}
.engage-opt:focus-visible{outline: 2px solid var(--e-burgundy); outline-offset: 2px;}
.engage-step.answered .engage-opts{display: block;}
.engage-card.answered{background: linear-gradient(135deg, #FFFFFF 0%, #F7FBF8 100%);}
.engage-card.answered::before{background: linear-gradient(180deg, var(--green, #2D8B5E) 0%, var(--green-light, #3BA876) 100%);}
.engage-step.answered .engage-q{color: var(--e-gray500); font-size: clamp(1.05rem, 2.2vw, 1.2rem);}
.engage-step.answered .engage-q-tag{background: var(--green-pale, #E8F5EE); color: var(--green-dark, #1F6B45); border-color: rgba(45,139,94,0.18);}
.engage-step.answered .engage-q-dot{background: var(--green, #2D8B5E); animation: none;}
.engage-picked{display: inline-block; font-weight: 700; color: var(--green-dark, #1F6B45);
    background: var(--green-pale, #E8F5EE); border: 1px solid rgba(45,139,94,0.18);
    border-radius: 999px; padding: 6px 15px; font-size: 0.88rem; margin-bottom: 12px;}
.engage-picked::before{content: '✓ ';}
.engage-insight{color: #374151; font-size: 1.02rem; line-height: 1.7; margin: 0;
    animation: engage-rise .4s ease;}
@keyframes engage-rise{ from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.engage-mini{display: inline-block; margin-top: 14px; font-weight: 600; font-size: 0.94rem;
    color: var(--e-burgundy); text-decoration: none;
    border-bottom: 2px solid rgba(123,45,59,0.25); padding-bottom: 2px;
    transition: border-color .2s, color .2s;}
.engage-mini:hover{color: var(--e-burgundy-dark); border-bottom-color: var(--e-burgundy);}
.engage-step + .engage-step{margin-top: 22px; padding-top: 22px;
    border-top: 1px dashed var(--e-gray200);}
.engage-step--new{opacity: 0; transform: translateY(10px);
    transition: opacity .42s ease, transform .42s cubic-bezier(.22, 1, .36, 1);}
.engage-step--new.is-in{opacity: 1; transform: none;}
.engage-ghost{z-index: 3; pointer-events: none;
    transform-origin: top left;
    transition: opacity .34s ease, transform .5s cubic-bezier(.22, 1, .36, 1), filter .34s ease;}
.engage-ghost.is-out{opacity: 0; transform: scale(1.04) translateY(-6px); filter: blur(3px);}
.wz-morph{position: relative; z-index: 4;
    transform-origin: top left; will-change: transform, opacity;
    transition: transform .58s cubic-bezier(.22, 1, .36, 1), opacity .42s ease;}
.wz-morph.wz-morph-start{transition: none; opacity: 0.35;}
.engage-cap{max-width: 760px; margin: 34px 0; padding: 0; border-radius: 18px; overflow: hidden;
    background: linear-gradient(135deg, #7B2D3B 0%, #5E1F2C 100%); color: #FBF6F0;
    box-shadow: 0 18px 44px rgba(94,31,44,0.28);}
.engage-cap.is-in{animation: engage-pop .45s ease;}
@keyframes engage-pop{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.engage-cap-in{padding: clamp(22px, 4vw, 32px);}
.engage-badge{display: inline-block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(251,246,240,0.15); padding: 6px 13px; border-radius: 999px; margin-bottom: 12px;}
.engage-cap-title{font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-size: clamp(1.35rem, 3.2vw, 1.8rem); font-weight: 600; line-height: 1.2; margin: 0 0 8px; color: #fff;}
.engage-cap-sub{color: rgba(251,246,240,0.9); font-size: 1rem; line-height: 1.55; margin: 0 0 18px;}
.engage-cap-sub a{color: #F4C9B8; font-weight: 600;}
.engage-form{display: flex; flex-direction: column; gap: 10px;}
.engage-row{display: flex; gap: 10px;}
.engage-row .engage-inp{flex: 1;}
.engage-inp{width: 100%; font: inherit; font-size: 1rem; padding: 14px 16px; border-radius: 12px;
    border: 1.5px solid rgba(251,246,240,0.25); background: rgba(255,255,255,0.96); color: #2D3436;}
.engage-inp::placeholder{color: #9CA3AF;}
.engage-inp:focus{outline: 2px solid #F4C9B8; outline-offset: 1px;}
.engage-submit{display: inline-block; text-align: center; text-decoration: none; font: inherit; font-weight: 700; font-size: 1.02rem;
    background: #FBF6F0; color: #7B2D3B; border: none; border-radius: 12px; padding: 15px 22px; cursor: pointer;
    transition: transform .12s, background .15s; margin-top: 2px;}
.engage-submit:hover{transform: translateY(-1px); background: #fff;}
.engage-submit.as-link{display: inline-block;}
.engage-err{color: #FFD9D0; font-size: 0.88rem; font-weight: 500;}
.engage-full{display: inline-block; margin-top: 14px; color: rgba(251,246,240,0.92); font-weight: 500; font-size: 0.92rem; text-decoration: underline;}
.engage-full:hover{color: #fff;}
@media (max-width: 560px){
.engage-row{flex-direction: column;}
.engage-opt{min-width: 100%;}
}
@media (prefers-reduced-motion: reduce){
.engage-cap.is-in{animation: none;}
.engage-opt,.engage-submit{transition: none;}
}
.engage-or{display: flex; align-items: center; gap: 12px; margin: 18px 0 12px;
    color: rgba(251,246,240,0.6); font-size: 0.76rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;}
.engage-or span{flex: 0 0 auto;}
.engage-or::before,.engage-or::after{content: ''; flex: 1; height: 1px; background: rgba(251,246,240,0.2);}
.engage-phone{display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
    font-weight: 700; font-size: 1.18rem; letter-spacing: 0.02em; color: #fff;
    background: rgba(255,255,255,0.1); border: 1.5px solid rgba(251,246,240,0.3);
    border-radius: 12px; padding: 13px 18px; transition: background .15s, border-color .15s;}
.engage-phone:hover{background: rgba(255,255,255,0.18); border-color: rgba(251,246,240,0.55);}
.engage-phone svg{width: 20px; height: 20px; fill: none; stroke: #F4C9B8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;}
@media (prefers-reduced-motion: reduce){
.engage-q-dot{animation: none;}
.engage-insight{animation: none;}
.engage-card,.engage-mini{transition: none;}
.engage-step,.engage-step--new,.engage-ghost,.wz-morph{transition: none; animation: none;}
}
@media (max-width: 560px){
.engage-card{padding: 22px 18px; margin: 30px 0; border-radius: 16px;}
.engage-opt{padding: 15px 14px;}
}
.content-wrap .engage-cap .engage-cap-sub{color: rgba(251,246,240,0.92); font-size: 1rem; line-height: 1.55; margin: 0 0 18px;}
.content-wrap .engage-cap .engage-cap-sub a{color: #F4C9B8; font-weight: 600;}
.content-wrap .engage-cap .engage-cap-title{color: #fff;}
.content-wrap .engage-card .engage-q{color: var(--e-charcoal); font-size: clamp(1.2rem, 2.8vw, 1.5rem); line-height: 1.35; margin: 0 0 20px;}
.content-wrap .engage-card .engage-step.answered .engage-q{color: var(--e-gray500); font-size: clamp(1.05rem, 2.2vw, 1.2rem);}
.content-wrap .engage-card .engage-insight{color: #374151; font-size: 1.02rem; line-height: 1.7; margin: 0;}
.content-wrap .tool .tool-intro{color: var(--tl-gray500); font-size: 0.96rem; line-height: 1.5; margin: 0 0 20px;}
.content-wrap .tool .tool-note{color: var(--tl-gray500); font-size: 0.82rem; line-height: 1.5; margin: 14px 0 0;}
.content-wrap .tool .tool-disclaimer{color: var(--tl-gray500); font-size: 0.8rem; line-height: 1.5;}
