/* outils.vread.fr hub – READ FRANCE SAS. Shared neutral base, hub accent: indigo. */
:root{--bg:#f8fafc;--bg-soft:#f1f5f9;--card:#fff;--fg:#0f172a;--muted:#475569;--line:#dbe2ea;--accent:#4338ca;--accent-strong:#3730a3;--accent-soft:#eef0ff;--accent-fg:#fff;--focus:#b3470b;--radius:12px;--shadow:0 1px 2px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.06);--shadow-lg:0 10px 30px rgba(15,23,42,.12)}
@media (prefers-color-scheme:dark){:root{--bg:#0b1120;--bg-soft:#111a2e;--card:#131c31;--fg:#e8edf5;--muted:#aab6c8;--line:#2a3650;--accent:#a5b4fc;--accent-strong:#c7d2fe;--accent-soft:#1e2550;--accent-fg:#0b1120;--focus:#ffb26b;--shadow:0 1px 2px rgba(0,0,0,.4);--shadow-lg:0 10px 30px rgba(0,0,0,.5)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-wrap:anywhere}
a{color:var(--accent);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--card);padding:8px;z-index:10}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(1.8rem,4.2vw,2.8rem);margin:0 0 14px}
.lead{color:var(--muted);max-width:60ch;margin:0;font-size:1.1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Top bar with the wordmark (hub) */
.topbar{background:var(--card);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.wordmark{display:inline-flex;align-items:baseline;gap:.45em;text-decoration:none;color:var(--fg);font-weight:800;letter-spacing:.06em;font-size:1.05rem;white-space:nowrap}
.wordmark .wm-dash{color:var(--accent)}
.wordmark .wm-sub{font-weight:600;letter-spacing:0;color:var(--muted)}
.topnav{margin-left:auto;display:flex;gap:4px 18px;align-items:center}
.topnav a{color:var(--fg);text-decoration:none;font-weight:500;padding:6px 0}
.topnav a:hover{color:var(--accent)}
.topnav .contact-link{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700;color:var(--accent);min-height:44px;display:inline-flex;align-items:center}
@media (max-width:719px){.topnav .opt{display:none}}

/* Generic page header (legal pages, 404, prospects) */
header{padding:40px 0 24px;border-bottom:1px solid var(--line)}
header.topbar{padding:0}
main{padding:32px 0 56px}
footer{border-top:1px solid var(--line);background:var(--card);padding:24px 0 40px;color:var(--muted);font-size:.92rem}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer nav a{margin-right:0}
.legal h2{font-size:1.2rem;margin-top:28px}
.legal .wrap{max-width:820px;margin-left:auto;margin-right:auto}

/* Hub hero */
.hero{display:grid;gap:28px;padding:48px 0 16px;align-items:center}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin:24px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-fg);font-weight:700;text-decoration:none;padding:12px 20px;border-radius:10px;min-height:44px;border:2px solid var(--accent)}
.btn:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn.ghost{background:var(--card);color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.text-link{font-weight:600}
.audiences{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.audiences a{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:var(--fg);box-shadow:var(--shadow)}
.audiences a:hover{border-color:var(--accent)}
.audiences .ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:800}
.audiences strong{display:block}
.audiences span.sub{color:var(--muted);font-size:.92rem}
@media (min-width:860px){.hero{grid-template-columns:1.25fr 1fr;gap:56px;padding-top:64px}}

/* Offer groups */
.sec{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:0 0 6px}
.sec-lead{color:var(--muted);margin:0 0 18px}
.group{margin-top:44px}
.group-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.group-head h3{font-size:1.25rem;margin:0}
.group-head p{margin:0;color:var(--muted);font-size:.95rem}
.grid{list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.card h4{font-size:1.15rem;margin:0;line-height:1.3}
.card p{margin:0;color:var(--muted);font-size:.97rem}
.card .desc{flex:1}
.card a.go{font-weight:700;text-decoration:none;color:var(--fg)}
.card a.go:hover{color:var(--accent);text-decoration:underline}
.card .price{color:var(--fg);font-size:.95rem}
.card .price strong{font-size:1.6rem}
.card .free{font-size:.93rem}
.card .actions{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:4px}
.groups{display:grid;gap:0 24px}
@media (min-width:900px){.groups{grid-template-columns:1fr 1fr}#of{grid-column:1 / -1}#of .grid{grid-template-columns:1fr 1fr}.group{display:flex;flex-direction:column}.group .grid{flex:1;grid-template-columns:1fr}.group-head{flex-direction:column;gap:2px}}
.btn{white-space:nowrap}
.vat{font-size:.88rem;color:var(--muted);margin:18px 0 0}

/* Free tools: compact rows */
.tools{list-style:none;margin:0;padding:0;display:grid;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.tools li{display:grid;gap:2px 16px;padding:14px 18px;border-top:1px solid var(--line)}
.tools li:first-child{border-top:0}
.tools a{font-weight:700;text-decoration:none}
.tools a:hover{text-decoration:underline}
.tools span{color:var(--muted);font-size:.94rem}
@media (min-width:720px){.tools li{grid-template-columns:240px 1fr;align-items:baseline}}

/* About + contact */
.about{margin-top:56px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 20px;box-shadow:var(--shadow)}
.about h2{margin:0 0 8px;font-size:1.4rem}
.about p{margin:0 0 10px}
.about-intro{max-width:70ch}
.about-intro p:last-child{margin:0}
/* Founders (same block on every outils.vread.fr site) */
.founders{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px}
.founder{display:grid; align-content: start;grid-template-columns:96px 1fr;gap:14px 18px;align-items:center;margin:0;padding:18px;background:var(--bg);border:1px solid var(--line);border-radius:14px}
.founder-photo{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--line);box-shadow:0 0 0 3px var(--card),0 0 0 4px var(--line)}
.about .founder-name{margin:0;font-size:1.1rem;line-height:1.3;color:var(--fg)}
.about .founder-role{margin:3px 0 0;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.about .founder-bio{grid-column:1/-1;margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
@media (min-width:720px){.founders{grid-template-columns:1fr 1fr;gap:20px}.founder{grid-template-columns:112px 1fr;padding:22px}.founder-photo{width:112px;height:112px}}
.about-foot{display:grid;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.about .about-contact{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.facts{list-style:none;margin:0;padding:0;color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;gap:2px 20px}
.facts li{padding:2px 0}
@media (min-width:860px){.about{padding:32px 36px}.about-foot{grid-template-columns:1fr auto;align-items:center}}
.fine{color:var(--muted);font-size:.88rem;margin-top:28px}

/* Legacy classes still used by older pages */
.card h2{font-size:1.1rem;margin:0;line-height:1.3}
.tag{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0}
section.note{margin-top:40px;color:var(--muted);font-size:.95rem;max-width:70ch}