/* Cauta — audit : page publique /audit/ et aperçu animé de la page d'accueil. Panneau toujours sombre. */
.a-dark { background:radial-gradient(120% 90% at 20% 0%, #2a2733 0%, #17151c 60%, #121016 100%); color:#F2EEE6; border-radius:var(--radius-md); border:1px solid #3d3a43; }
.a-hero { background:#141318; color:#F2EEE6; padding:var(--space-12) 0 var(--space-12); --paper:#1c1b20; --surface:#25242a; --ink:#f2eee6; --ink-muted:#b5ada2; --line:#3d3a43; --border-control:#7d7681; --accent:#e8775a; --accent-hover:#f08e74; --on-accent:#1c1b20; }
.a-hero .wrap { display:block; }
.a-hero .a-head { max-width:760px; margin-bottom:var(--space-8); }
.a-hero h1 { font-size:clamp(32px,4.4vw,52px); line-height:1.08; letter-spacing:-.025em; color:#f2eee6; }
.a-hero .lead { color:#cfc8bc; margin-top:var(--space-4); font-size:19px; max-width:52ch; }
.a-crumb { font-size:13px; color:#8f887d; margin-bottom:var(--space-4); }
.a-crumb a { color:#b5ada2; }

#audit-app { min-height:520px; padding:var(--space-8); opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
#audit-app.in { opacity:1; transform:none; }
.a-tag { display:inline-block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#e8775a; font-weight:700; }
.a-intro h2, .a-q h2, .a-res h2 { font-family:var(--font-display); font-size:clamp(26px,3.4vw,40px); line-height:1.12; letter-spacing:-.02em; margin:10px 0 8px; color:#f2eee6; }
.a-intro p { color:#cfc8bc; max-width:60ch; font-size:17px; line-height:1.6; }
.a-intro .a-note, .a-note { font-size:13px; color:#8f887d; margin-top:var(--space-6); max-width:70ch; }
.a-acts { display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-6); }
.a-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 var(--space-6); background:transparent; color:#f2eee6; border:1.5px solid #6a6470; border-radius:var(--radius-sm); font:600 16px/1 var(--font-body); cursor:pointer; text-decoration:none; transition:background .2s, border-color .2s; }
.a-btn:hover:not(:disabled) { border-color:#f2eee6; }
.a-btn.p { background:#e8775a; border-color:#e8775a; color:#1c1b20; }
.a-btn.p:hover:not(:disabled) { background:#f08e74; border-color:#f08e74; }
.a-btn:disabled { opacity:.4; cursor:not-allowed; }
.a-btn:focus-visible, .a-a:focus-visible { outline:2px solid #f2eee6; outline-offset:2px; }
.segs { display:flex; gap:4px; margin-bottom:var(--space-8); }
.segs i { flex:1; height:4px; border-radius:2px; background:#3b3744; transition:background .5s; }
.segs i.f { background:#7FCFA4; } .segs i.w { background:#E0B055; } .segs i.g { background:#EE8B7E; } .segs i.c { background:#F2EEE6; }
.a-nb { font:500 13px/1 var(--font-mono); color:#b5ada2; letter-spacing:.08em; }
.a-rf { font:500 13px/1.3 var(--font-mono); color:#e8775a; }
.a-cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); margin:var(--space-6) 0; }
.a-info { border-left:2px solid #4a4650; padding:2px 0 2px var(--space-3); font-size:15px; line-height:1.55; color:#cfc8bc; }
.a-info b { display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#b5ada2; margin-bottom:4px; font-weight:600; }
.a-qq { font-family:var(--font-display); font-size:21px; font-weight:600; color:#f2eee6; margin-bottom:var(--space-4); }
.a-ans { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.a-a { all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:var(--space-3); min-height:64px; padding:var(--space-3) var(--space-4); border:1.5px solid #4a4650; border-radius:var(--radius-sm); font:600 16px/1.2 var(--font-body); color:#f2eee6; transition:border-color .25s, background .25s, transform .25s; }
.a-a:hover { border-color:#b5ada2; transform:translateY(-1px); }
.a-a.sel { background:rgba(232,119,90,.16); border-color:#e8775a; }
.a-a kbd { font:500 12px/1 var(--font-mono); color:#b5ada2; border:1px solid #4a4650; border-radius:3px; padding:4px 7px; }
.a-a small { display:block; font-weight:400; font-size:13px; color:#b5ada2; margin-top:3px; }
.a-nav { display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-6); gap:var(--space-3); flex-wrap:wrap; }
.a-hint { font-size:12.5px; color:#8f887d; }
.a-score { display:flex; align-items:center; gap:var(--space-8); margin:var(--space-6) 0; flex-wrap:wrap; }
.a-ring { position:relative; width:170px; height:170px; flex:none; }
.a-ring span { position:absolute; inset:0; display:grid; place-items:center; text-align:center; font:700 44px/1 var(--font-display); }
.a-ring small { display:block; font:500 12px/1.2 var(--font-mono); color:#b5ada2; margin-top:4px; }
.a-score p { flex:1; min-width:240px; color:#cfc8bc; font-size:17px; line-height:1.6; }
.a-res h3 { font-family:var(--font-display); font-size:19px; margin:var(--space-6) 0 var(--space-3); color:#f2eee6; }
.a-gaps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.a-gaps li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); align-items:center; padding:var(--space-3); border:1px solid #3b3744; border-radius:var(--radius-sm); background:rgba(255,255,255,.03); }
.a-gaps b { font-size:15px; } .a-gaps small { display:block; color:#b5ada2; font-size:13px; margin-top:2px; }
.a-pill { font-size:12px; font-weight:600; padding:4px 9px; border-radius:3px; white-space:nowrap; }
.a-pill.w { background:#3A2E14; color:#E0B055; } .a-pill.b { background:#3F201D; color:#EE8B7E; }
.a-cta { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; margin-top:var(--space-8); padding:var(--space-6); border:1px solid #e8775a; border-radius:var(--radius-sm); background:rgba(232,119,90,.08); }
.a-cta b { display:block; font-family:var(--font-display); font-size:19px; color:#f2eee6; margin-bottom:4px; }
.a-cta span { color:#cfc8bc; font-size:15px; max-width:56ch; display:block; }

/* contenu SEO sous l'outil */
.a-liste { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4) var(--space-8); margin-top:var(--space-8); }
.a-liste article { border-top:1px solid var(--line); padding-top:var(--space-3); }
.a-liste h3 { font-size:17px; margin-bottom:4px; }
.a-liste p { color:var(--ink-muted); font-size:15px; }
.a-liste .ref { font:500 12.5px/1 var(--font-mono); color:var(--ink-muted); }

/* aperçu animé sur la page d'accueil */
.demo-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--space-12); align-items:center; }
.demo-grid h2 { max-width:18ch; }
.demo-pts { list-style:none; margin:var(--space-6) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.demo-pts li { padding-left:26px; position:relative; color:var(--ink-muted); }
.demo-pts li::before { content:"✓"; position:absolute; left:2px; color:var(--success); font-weight:700; }
.demo-pts b { color:var(--ink); }
.demo { position:relative; padding:var(--space-6); min-height:400px; overflow:hidden; }
.demo .d-top { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.demo .d-top .segs { flex:1; margin:0; }
.demo .d-tag { font:500 12px/1 var(--font-mono); color:#b5ada2; }
.demo .d-sc { transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.demo .d-sc[hidden] { display:none; }
.demo .d-sc.off { opacity:0; transform:translateY(10px); }
.demo h3 { font-family:var(--font-display); font-size:25px; line-height:1.15; color:#f2eee6; margin:6px 0; }
.demo .a-rf { margin-bottom:var(--space-3); }
.demo .d-i { border-left:2px solid #4a4650; padding-left:var(--space-3); font-size:14.5px; line-height:1.5; color:#cfc8bc; margin:var(--space-3) 0; }
.demo .d-qq { font:600 17px/1.3 var(--font-display); margin:var(--space-4) 0 var(--space-3); color:#f2eee6; }
.demo .d-ans { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.demo .d-a { display:flex; align-items:center; gap:var(--space-2); min-height:46px; padding:0 var(--space-3); border:1.5px solid #4a4650; border-radius:var(--radius-sm); font:600 14.5px/1 var(--font-body); color:#f2eee6; transition:all .35s; }
.demo .d-a.sel { background:rgba(232,119,90,.18); border-color:#e8775a; }
.demo .d-a kbd { font:500 11.5px/1 var(--font-mono); color:#b5ada2; border:1px solid #4a4650; border-radius:3px; padding:3px 6px; }
.demo .d-res { display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap; }
.demo .d-ring { position:relative; width:140px; height:140px; flex:none; }
.demo .d-ring span { position:absolute; inset:0; display:grid; place-items:center; text-align:center; font:700 38px/1 var(--font-display); }
.demo .d-ring small { display:block; font:500 11.5px/1.2 var(--font-mono); color:#b5ada2; margin-top:3px; }
.demo .d-gap { display:flex; gap:var(--space-2); align-items:center; font-size:14px; color:#cfc8bc; margin-top:6px; }
.demo .a-pill { font-size:12px; }
.demo-cta { display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-6); }
.demo-cta .ca-btn-secondary { color:var(--ink); }

@media (max-width: 960px) { .demo-grid { grid-template-columns:1fr; gap:var(--space-8); } .a-liste { grid-template-columns:1fr; } }
@media (max-width: 760px) { .a-cols, .a-ans { grid-template-columns:1fr; } #audit-app { padding:var(--space-4); } .demo .d-ans { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { #audit-app, .demo .d-sc, .a-a { transition:none; } }
@media print { .a-hero { background:#fff; color:#000; } body * { visibility:hidden; } #audit-app, #audit-app * { visibility:visible; } #audit-app { position:absolute; left:0; top:0; width:100%; background:#fff; color:#000; border:0; } #audit-app *{ color:#000 !important; background:transparent !important; } .a-cta,.a-acts,.segs{ display:none; } }