/* Shared styles for the pillar marketing pages (creation-site-web, sur-mesure).
   Self-contained literal values so the pages render identically regardless of
   which tokens home.css exposes. Matches the dark-blueprint design system. */
.cw-page { --cw-blue:#3b82f6; --cw-blue-light:#60a5fa; --cw-text:#f1f5f9; --cw-muted:rgba(255,255,255,0.62); --cw-dim:rgba(255,255,255,0.42); --cw-card:rgba(255,255,255,0.05); --cw-border:rgba(255,255,255,0.10); --cw-border-h:rgba(255,255,255,0.18); --cw-radius:16px; --cw-disp:'Outfit',sans-serif; --cw-mono:'Space Grotesk',monospace; --cw-ease:cubic-bezier(0.32,0.72,0,1); color:var(--cw-text); }
.cw-container { max-width:1120px; margin:0 auto; padding:0 24px; }
.cw-hero { position:relative; padding:150px 0 70px; overflow:hidden; }
.cw-hero__orb { position:absolute; top:-220px; left:50%; transform:translateX(-50%); width:760px; height:760px; background:radial-gradient(circle,rgba(59,130,246,0.13),transparent 60%); filter:blur(20px); pointer-events:none; }
.cw-crumb { display:flex; gap:10px; align-items:center; font-family:var(--cw-mono); font-size:.78rem; letter-spacing:.04em; color:var(--cw-dim); margin-bottom:26px; }
.cw-crumb a { color:var(--cw-muted); text-decoration:none; }
.cw-crumb a:hover { color:var(--cw-blue-light); }
.cw-badge { display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border:1px solid var(--cw-border); border-radius:100px; background:var(--cw-card); font-size:.85rem; color:var(--cw-muted); margin-bottom:26px; }
.cw-badge span.dot { width:7px; height:7px; border-radius:50%; background:var(--cw-blue-light); box-shadow:0 0 0 4px rgba(96,165,250,0.18); }
.cw-h1 { font-family:var(--cw-disp); font-weight:500; font-size:clamp(2.2rem,5.5vw,3.9rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 22px; }
.cw-sub { font-size:clamp(1.05rem,2vw,1.22rem); line-height:1.6; color:var(--cw-muted); max-width:660px; margin:0 0 34px; }
.cw-actions { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:50px; }
.cw-btn { display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:100px; font-family:var(--cw-disp); font-weight:600; font-size:.95rem; text-decoration:none; transition:transform .2s var(--cw-ease),background .2s,border-color .2s; }
.cw-btn--primary { background:var(--cw-blue); color:#fff; }
.cw-btn--primary:hover { background:var(--cw-blue-light); transform:translateY(-1px); }
.cw-btn--glass { background:var(--cw-card); color:var(--cw-text); border:1px solid var(--cw-border); }
.cw-btn--glass:hover { border-color:var(--cw-border-h); transform:translateY(-1px); }
.cw-proof { display:flex; align-items:center; gap:18px; padding-top:34px; border-top:1px solid var(--cw-border); max-width:600px; }
.cw-proof__num { font-family:var(--cw-mono); font-weight:700; font-size:2.6rem; line-height:1; color:var(--cw-blue-light); white-space:nowrap; }
.cw-proof__num small { font-size:1.3rem; color:var(--cw-dim); }
.cw-proof__label { font-size:.92rem; line-height:1.5; color:var(--cw-muted); }
.cw-section { padding:72px 0; }
.cw-label { display:inline-block; font-family:var(--cw-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cw-blue-light); margin-bottom:16px; }
.cw-h2 { font-family:var(--cw-disp); font-weight:500; font-size:clamp(1.7rem,3.5vw,2.6rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 14px; }
.cw-secsub { font-size:1.02rem; line-height:1.6; color:var(--cw-muted); max-width:640px; margin:0 0 8px; }
.cw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px; }
.cw-card { display:flex; flex-direction:column; background:var(--cw-card); border:1px solid var(--cw-border); border-radius:var(--cw-radius); overflow:hidden; transition:border-color .3s var(--cw-ease),transform .3s var(--cw-ease); }
.cw-card:hover { border-color:var(--cw-border-h); transform:translateY(-4px); }
.cw-card__shot { display:block; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--cw-border); background:#060c1a; }
.cw-card__shot img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s var(--cw-ease); }
.cw-card:hover .cw-card__shot img { transform:scale(1.03); }
.cw-card__body { padding:24px; display:flex; flex-direction:column; gap:14px; flex:1; }
.cw-card__title { font-family:var(--cw-disp); font-weight:600; font-size:1.25rem; margin:0; }
.cw-card__type { font-family:var(--cw-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; }
.cw-card__desc { font-size:.9rem; line-height:1.55; color:var(--cw-muted); margin:0; flex:1; }
.cw-scores { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; list-style:none; padding:0; margin:4px 0; }
.cw-score { display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 4px; border-radius:10px; background:rgba(255,255,255,0.03); border:1px solid var(--cw-border); }
.cw-score b { font-family:var(--cw-mono); font-weight:700; font-size:1.15rem; line-height:1; }
.cw-score span { font-size:.6rem; letter-spacing:.03em; color:var(--cw-dim); text-transform:uppercase; }
.cw-score--good { border-color:rgba(52,211,153,0.25); background:rgba(52,211,153,0.06); }
.cw-score--good b { color:#34d399; }
.cw-score--ok { border-color:rgba(251,191,36,0.22); background:rgba(251,191,36,0.05); }
.cw-score--ok b { color:#fbbf24; }
.cw-card__links { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cw-card__visit { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.88rem; color:var(--cw-text); text-decoration:none; transition:color .2s; }
.cw-card__visit:hover { color:var(--cw-blue-light); }
.cw-card__report { font-family:var(--cw-mono); font-size:.74rem; color:var(--cw-dim); text-decoration:none; }
.cw-card__report:hover { color:var(--cw-blue-light); }
.cw-wip { display:grid; grid-template-columns:0.9fr 1.1fr; margin-top:42px; border:1px solid var(--cw-border); border-radius:var(--cw-radius); overflow:hidden; background:var(--cw-card); }
.cw-wip__visual { display:flex; align-items:center; justify-content:center; padding:44px; background:linear-gradient(135deg,rgba(59,130,246,0.07),rgba(59,130,246,0.01)); border-right:1px solid var(--cw-border); }
.cw-wip__visual svg { width:100%; max-width:330px; height:auto; }
.cw-wip__body { padding:42px; display:flex; flex-direction:column; gap:15px; }
.cw-wip__tag { align-self:flex-start; display:inline-flex; align-items:center; padding:5px 13px; border-radius:100px; font-family:var(--cw-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--cw-blue-light); background:rgba(59,130,246,0.16); border:1px solid rgba(59,130,246,0.30); }
.cw-wip__title { font-family:var(--cw-disp); font-weight:600; font-size:1.55rem; line-height:1.15; margin:0; }
.cw-wip__desc { font-size:.98rem; line-height:1.6; color:var(--cw-muted); margin:0; }
.cw-feats { list-style:none; padding:0; margin:4px 0 10px; display:flex; flex-direction:column; gap:10px; }
.cw-feats li { position:relative; padding-left:26px; font-size:.92rem; line-height:1.5; color:var(--cw-muted); }
.cw-feats li::before { content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%; background:rgba(59,130,246,0.18); border:1px solid rgba(59,130,246,0.4); }
.cw-feats li::after { content:""; position:absolute; left:4px; top:9px; width:4px; height:7px; border-right:1.5px solid var(--cw-blue-light); border-bottom:1.5px solid var(--cw-blue-light); transform:rotate(45deg); }
.cw-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.cw-step { padding:28px; border:1px solid var(--cw-border); border-radius:var(--cw-radius); background:var(--cw-card); transition:border-color .3s var(--cw-ease),transform .3s var(--cw-ease); }
.cw-step:hover { border-color:var(--cw-border-h); transform:translateY(-3px); }
.cw-step b { font-family:var(--cw-mono); font-weight:700; font-size:1.05rem; color:var(--cw-blue); opacity:.6; }
.cw-step h3 { font-family:var(--cw-disp); font-weight:600; font-size:1.15rem; margin:14px 0 10px; }
.cw-step p { font-size:.9rem; line-height:1.6; color:var(--cw-muted); margin:0; }
.cw-soon { align-self:flex-start; display:inline-flex; align-items:center; padding:5px 13px; border-radius:100px; font-family:var(--cw-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--cw-dim); background:rgba(255,255,255,0.04); border:1px solid var(--cw-border); }
.cw-card__shot--icon { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(59,130,246,0.08),rgba(59,130,246,0.01)); }
.cw-card__shot--icon svg { width:62%; max-width:210px; height:auto; }
.cw-card__tag { align-self:flex-start; display:inline-flex; align-items:center; padding:4px 11px; border-radius:100px; font-family:var(--cw-mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; }
.cw-card__tag--live { color:var(--cw-blue-light); background:rgba(59,130,246,0.16); border:1px solid rgba(59,130,246,0.30); }
.cw-card__tag--soon { color:var(--cw-dim); background:rgba(255,255,255,0.04); border:1px solid var(--cw-border); }
@media (max-width:900px){ .cw-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto} .cw-steps{grid-template-columns:1fr} .cw-wip{grid-template-columns:1fr} .cw-wip__visual{border-right:none;border-bottom:1px solid var(--cw-border)} }
@media (max-width:560px){ .cw-hero{padding:120px 0 56px} .cw-proof{flex-direction:column;align-items:flex-start;gap:10px} }