.bubble injecté par s1_d|raw */
.step p code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 14px;
color: #d6e8a3;
background: #1b2012;
padding: 2px 6px;
border-radius: 5px;
}
/* --- Animation .reveal (optionnelle) --- */
.reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* texte mono inline injecté via s1_d|raw, ex: .bubble */
.mono {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.875em; /* ~14px dans un p à 16px */
color: #d6e8a3;
background: #1b2012;
padding: 2px 6px;
border-radius: 5px;
white-space: nowrap;
}
/* score feature */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
@media(max-width:900px){.feat{grid-template-columns:1fr;gap:38px}}
.gauge-wrap{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
/* the analysis panel's two measures, shared by the home page mock-up and the
real project sheet so the promise and the delivered screen match */
.measure-card{margin-top:22px;padding:16px 18px;border:1px solid var(--line);border-radius:10px}
.measure-title{font-family:var(--mono);color:var(--lime);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.score-cols{display:flex;gap:26px;flex-wrap:wrap}
/* the two scores sit side by side wherever there is room. In a narrow column
(the home page's two-column score section) they stack instead of forcing a
width the container cannot give — each score keeps its ring and its wording
either way, so the two layouts say the same thing. */
.score-col{flex:1 1 240px;min-width:0}
.score-cols .gauge-wrap{gap:20px}
.fnl-explain{flex:1;min-width:150px;margin:0;font-size:13px;line-height:1.6}
/* Whether the wording fits beside its ring depends on the CARD's width, not
the window's: the same markup sits in a full-width project sheet and in the
home page's narrow two-column panel. A container query asks the real
question — when the card is tight, the wording goes under its ring so the
two scores still read side by side instead of stacking. */
.score-cols{container-type:inline-size}
@container (max-width:620px){
/* the wording drops under its ring and the ring shrinks, so the two scores
still stand side by side: stacking them would read as one score followed
by another rather than as one pair of measures */
.score-cols .gauge-wrap{flex-direction:column;align-items:flex-start;gap:14px}
.score-cols .fnl-explain{min-width:0}
.score-cols .score-col{flex:1 1 0;min-width:0}
.score-cols .ring{width:128px;height:128px}
.score-cols .ring svg{width:128px;height:128px}
.score-cols .ring .num{font-size:34px}
}
.ring{position:relative;width:168px;height:168px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .val .num{font-family:var(--disp);font-weight:800;font-size:42px;color:var(--lime);letter-spacing:-.03em;line-height:1}
.ring .val .lab{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:5px}
.layerlist{flex:1;min-width:220px}
.layerlist .row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.layerlist .row span{color:var(--muted)}
.layerlist .row b{font-family:var(--mono);font-weight:500}
.tag-hi{color:var(--lime)}.tag-mid{color:#e8d35a}.tag-lo{color:#e89a5a}
.regen{margin-top:22px;background:var(--blue-dim);border:1px solid rgba(91,140,255,.3);border-radius:12px;padding:16px 18px;font-size:14px;color:#cdd9ff}
.regen b{color:#fff}
ul.checks{list-style:none;padding:0;margin:22px 0 0}
ul.checks li{padding:9px 0 9px 30px;position:relative;color:var(--muted)}
ul.checks li b{color:var(--ink);font-weight:600}
ul.checks li::before{content:"";position:absolute;left:0;top:14px;width:13px;height:13px;border-radius:4px;
background:var(--lime);box-shadow:0 0 12px rgba(196,240,66,.5)}
/* stacks */
.stacks{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.chip{font-family:var(--mono);font-size:14px;padding:11px 18px;border:1px solid var(--line);border-radius:999px;
background:rgba(196,240,66,.04);color:var(--ink);transition:.2s}
.chip:hover{background:rgba(196,240,66,.1);transform:translateY(-2px)}
.chip.soon{border-style:dashed;color:var(--muted-2);background:transparent}
.chip .b{color:var(--blue);margin-right:7px}
/* compare — one client's story: three dead ends, then the Exode timeline */
.case-intro{font-size:15px;color:var(--muted);margin-bottom:22px}
/* Each card is a subgrid of the row, so title / steps / total line up across
the three columns: the totals then share one top edge AND one bottom edge,
whatever the number of steps above them. The routes exist to be compared —
ragged totals make that comparison harder to read. */
.case-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;
grid-template-rows:auto 1fr auto}
.case-card{grid-row:span 3;display:grid;grid-template-rows:subgrid;
border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:24px 22px}
@media(max-width:820px){
.case-cols{grid-template-columns:1fr;grid-template-rows:none}
.case-card{grid-row:auto;display:flex;flex-direction:column}
}
.case-card-title{font-family:var(--mono);color:var(--lime);font-size:12px;text-transform:uppercase;
letter-spacing:.08em;margin-bottom:14px}
.case-steps{font-size:14.5px;line-height:1.7;color:var(--muted);margin-bottom:14px}
.case-steps>div{margin-bottom:4px}
.case-x{color:#d98f6e;margin-right:4px}
.case-total{border-top:1px dashed var(--line);padding-top:12px;font-size:14.5px;color:var(--muted)}
.case-total b{color:var(--ink);font-weight:600}
/* the winning route: same panel as the others, set apart by a lime tint
rather than by a different shape */
.case-exode{background:linear-gradient(180deg,rgba(196,240,66,.06),var(--panel));
border:1px solid rgba(196,240,66,.35);border-radius:var(--radius);padding:24px 22px}
.case-exode .case-total{margin-top:16px}
.case-exode-title{font-family:var(--mono);color:var(--lime);font-size:12px;text-transform:uppercase;
letter-spacing:.08em;margin-bottom:14px}
.case-timeline{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14.5px;line-height:1.6;color:var(--muted)}
@media(max-width:620px){.case-timeline{grid-template-columns:1fr;gap:2px 0}
.case-timeline .case-what{margin-bottom:12px}}
.case-when{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--lime);white-space:nowrap}
.case-what{color:var(--ink);opacity:.86}
.case-total-win{border-top-color:rgba(196,240,66,.22);color:var(--ink);opacity:.92}
.case-disclaimer{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted-2);margin:18px 0 0}
/* pricing */
.price{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
@media(max-width:900px){.price{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.price{grid-template-columns:1fr}}
.pcard{border:1px solid var(--line-soft);border-radius:var(--radius);padding:26px 22px;background:var(--panel);display:flex;flex-direction:column;position:relative;transition:.25s}
.pcard:hover{transform:translateY(-3px);border-color:var(--line)}
.pcard.feat-card{border-color:var(--lime);background:linear-gradient(180deg,rgba(196,240,66,.07),var(--panel))}
.pcard .ribbon{position:absolute;top:-11px;right:18px;background:var(--lime);color:#10130a;font-family:var(--mono);
font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:6px;text-transform:uppercase}
.pcard .name{font-family:var(--disp);font-weight:700;font-size:18px}
.pcard .amt{font-family:var(--disp);font-weight:800;font-size:30px;margin:12px 0 2px;letter-spacing:-.02em}
.pcard .amt small{font-size:14px;color:var(--muted);font-weight:500;font-family:var(--body)}
.pcard .meta{color:var(--muted);font-size:13.5px;min-height:38px}
.pcard ul{list-style:none;padding:0;margin:18px 0 22px;flex:1}
.pcard ul li{font-size:14px;color:var(--muted);padding:6px 0 6px 22px;position:relative}
.pcard ul li::before{content:"›";position:absolute;left:0;color:var(--lime-deep);font-family:var(--mono)}
.pcard .btn{justify-content:center;width:100%}
/* ---------- anonymous feedback poll ---------- */
.feedback{padding:56px 0 72px}
.feedback-card{max-width:760px;margin:0 auto;padding:30px 32px;
border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.feedback-title{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.6vw,30px);
letter-spacing:-.02em;line-height:1.1;margin:12px 0 8px}
.feedback-sub{color:var(--muted);font-size:15px;margin:0 0 22px}
.feedback-block{margin-bottom:20px}
.feedback-q{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;
color:var(--lime);margin-bottom:10px}
.feedback-ratings,.feedback-interests{display:flex;flex-wrap:wrap;gap:10px}
/* the whole pill is the target: a 13px radio is a poor thing to aim at */
.feedback-pill{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
padding:9px 15px;border:1px solid var(--line);border-radius:999px;
font-size:14.5px;color:var(--ink);background:rgba(255,255,255,.02);transition:.18s}
.feedback-pill:hover{border-color:var(--lime);background:rgba(196,240,66,.06)}
.feedback-pill input{accent-color:var(--lime);margin:0;cursor:pointer}
.feedback-pill:has(input:checked){border-color:var(--lime);background:rgba(196,240,66,.12)}
/* keyboard users must see the focused pill, not just a ring on a hidden dot */
.feedback-pill:focus-within{outline:2px solid var(--lime);outline-offset:2px}
/* optional, and placed after the answers so it never reads as a gate */
.feedback-email input{width:100%;max-width:340px;padding:10px 13px;border-radius:10px;
border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--ink);
font-family:var(--body);font-size:14.5px}
.feedback-email input:focus{outline:none;border-color:var(--lime)}
.feedback-email input::placeholder{color:var(--muted-2)}
.feedback-hint{margin:7px 0 0;color:var(--muted-2);font-size:12.5px;line-height:1.5}
.feedback-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
margin-top:24px;padding-top:20px;border-top:1px dashed var(--line)}
/* the note reads first, the submit button sits at the far right. Only the
visual order is swapped: the button stays first in the DOM, so it keeps
its natural place in the tab order. */
.feedback-foot .btn{order:2;margin-left:auto}
.feedback-note{order:1;margin:0;color:var(--muted-2);font-size:13px;line-height:1.5}
.feedback-note .hl{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
@media(max-width:620px){
.feedback-card{padding:24px 20px}
.feedback-foot .btn{width:100%;justify-content:center}
}
/* Each pricing card carries its own caveat, dashed off from the features
above it. It used to sit outside the card, centred, where it read as a
footnote to the whole section rather than to the offer it qualifies. */
.card-note{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
font-family:var(--mono);font-size:12.5px;color:var(--muted-2);line-height:1.5}
.backup-what{color:var(--muted);font-size:14.5px;line-height:1.65;margin:12px 0 0;max-width:80ch}
/* backup tool: sold alone, not a conversion tier — full-width row under the grid */
/* the price and its button sit at the top of the card, level with the
offer's name, instead of floating at the vertical centre */
.pcard-wide{margin-top:16px;flex-direction:row;align-items:flex-start;gap:32px}
.pcard-wide .pcard-wide-main{flex:1;min-width:0}
.pcard-wide .meta{min-height:0;margin-top:4px}
.pcard-wide ul{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:2px 26px}
.pcard-wide ul li{padding-top:2px;padding-bottom:2px}
.pcard-wide .pcard-wide-side{display:flex;flex-direction:column;align-items:stretch;gap:12px;flex:0 0 auto;text-align:center}
.pcard-wide .amt{margin:0}
@media(max-width:760px){
.pcard-wide{flex-direction:column;align-items:stretch;gap:18px}
.pcard-wide ul{display:block}
.pcard-wide .pcard-wide-side{text-align:left}
}
/* claude band */
/* same vertical lime wash as the other highlighted panels (.pcard.feat-card,
.case-exode): the radial glow this used to carry was the only one on the
page and read as a blurred blob */
.band{border:1px solid var(--line);border-radius:var(--radius);padding:46px 40px;
background:linear-gradient(180deg,rgba(196,240,66,.07),var(--panel));position:relative;overflow:hidden}
.band h2{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;
line-height:1.1;margin:8px 0 14px;max-width:22ch}
.band p{color:var(--muted);font-size:18px;max-width:52ch;margin:0}
.band .cta-row{margin-top:26px}
.band .trust{margin-top:18px}
/* faq */
.faq{max-width:820px}
details{border-bottom:1px solid var(--line-soft);padding:6px 0}
summary{list-style:none;cursor:pointer;padding:18px 4px;font-family:var(--disp);font-weight:600;font-size:18px;
display:flex;justify-content:space-between;align-items:center;gap:18px;transition:color .2s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--lime)}
summary .mk{font-family:var(--mono);color:var(--lime);transition:transform .25s;flex:none}
details[open] summary .mk{transform:rotate(45deg)}
/* FAQ answers come from the database, written in an editor that wraps them
in its own before it, so a
"details p" selector misses the text entirely. Target the