/* ===== scan-assur.com : feuille de style partagée (pages auteur & légales) ===== */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#F2F7F7; --bg-2:#E9F1F1; --surface:#FFFFFF; --surface-2:#F6FBFB;
  --border:rgba(12,46,54,.10); --border-2:rgba(12,46,54,.17);
  --ink:#0A1E24; --ink-2:#456068; --ink-3:#7B929A;
  --scan:#0E9E88; --scan-2:#1E86D6; --scan-soft:rgba(14,158,136,.11);
  --gold:#B0790C; --coral:#DB463A; --good:#12945F;
  --shadow:0 18px 46px -24px rgba(10,44,52,.22);
  --glow:0 0 0 1px rgba(14,158,136,.22), 0 14px 34px -12px rgba(14,158,136,.20);
  --sans:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,"Cascadia Code",Menlo,monospace;
  --maxw:1180px;
}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(900px 520px at 82% -8%, var(--scan-soft), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg) 42%)}
a{color:inherit; text-decoration:none}
h1,h2,h3{text-wrap:balance; margin:0; letter-spacing:-.02em; line-height:1.1; font-weight:680}
p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--scan); display:inline-flex; align-items:center; gap:.6em; font-weight:600}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor; opacity:.6}
.mono{font-family:var(--mono)}

/* ---- NAV ---- */
header.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(14px); background:color-mix(in srgb, var(--bg) 72%, transparent); border-bottom:1px solid var(--border)}
.nav-in{display:flex; align-items:center; gap:20px; height:66px}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.02em; font-size:1.06rem}
.brand .mark{width:30px; height:30px; flex:none}
.nav-links{display:flex; gap:26px; margin-left:26px; font-size:.92rem; color:var(--ink-2)}
.nav-links a{transition:color .2s} .nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans); font-weight:600; font-size:.95rem; padding:.72em 1.15em; border-radius:12px; cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .25s; white-space:nowrap}
.btn-primary{background:linear-gradient(120deg,var(--scan),var(--scan-2)); color:#fff; box-shadow:var(--glow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--surface); border-color:var(--border); color:var(--ink)}
.btn-ghost:hover{border-color:var(--border-2); transform:translateY(-2px)}
@media (max-width:820px){ .nav-links{display:none} }

/* ---- PAGE ---- */
.page{padding:64px 0 84px}
.page-head{max-width:760px; margin-bottom:40px}
.page-head h1{font-size:clamp(2.2rem,4.4vw,3.4rem); margin:.4em 0 .35em}
.page-head p{color:var(--ink-2); font-size:1.08rem}
.crumbs{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-3); margin-bottom:22px}
.crumbs a:hover{color:var(--scan)}

/* ---- AUTEUR ---- */
.author-top{display:grid; grid-template-columns:170px 1fr; gap:34px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:34px; box-shadow:var(--shadow)}
.avatar{width:170px; height:170px; border-radius:26px; background:linear-gradient(140deg,var(--scan),var(--scan-2)); display:grid; place-items:center; color:#fff; font-size:3.4rem; font-weight:700; letter-spacing:-.03em; box-shadow:var(--glow)}
img.avatar{display:block; object-fit:cover; object-position:34% 38%}
.author-top h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.author-role{font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; color:var(--scan); margin:8px 0 14px; text-transform:uppercase}
.author-lead{color:var(--ink-2); font-size:1.05rem; max-width:46ch}
.author-links{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}
.author-links a{display:inline-flex; align-items:center; gap:.5em; font-size:.9rem; font-weight:600; padding:.6em 1em; border-radius:11px; border:1px solid var(--border); background:var(--surface-2); transition:border-color .2s, transform .15s}
.author-links a:hover{border-color:var(--scan); transform:translateY(-1px)}
.author-links svg{color:var(--scan)}
@media (max-width:640px){ .author-top{grid-template-columns:1fr; text-align:center; justify-items:center} .avatar{width:130px;height:130px;font-size:2.6rem} .author-lead{margin:0 auto} }

.prose{max-width:70ch; margin-top:44px}
.prose h2{font-size:1.5rem; margin:34px 0 12px}
.prose p{color:var(--ink-2); margin-bottom:14px}
.prose ul{color:var(--ink-2); padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px; margin:6px 0 16px}
.prose li{display:flex; gap:11px; align-items:flex-start}
.prose li svg{color:var(--scan); flex:none; margin-top:4px}
.prose strong{color:var(--ink)}

.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
.mini-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px}
.mini-card .ic{width:38px;height:38px;border-radius:11px;background:var(--scan-soft);color:var(--scan);display:grid;place-items:center;margin-bottom:12px}
.mini-card h3{font-size:1rem; margin-bottom:6px}
.mini-card p{color:var(--ink-2); font-size:.9rem}
@media (max-width:760px){ .cards3{grid-template-columns:1fr} }

/* ---- LÉGAL ---- */
.legal{max-width:76ch}
.legal section{margin-bottom:30px}
.legal h2{font-size:1.3rem; margin:0 0 10px; display:flex; align-items:center; gap:.5em}
.legal h2 .n{font-family:var(--mono); font-size:.8rem; color:var(--scan)}
.legal p{color:var(--ink-2); margin-bottom:10px}
.legal a{color:var(--scan); font-weight:600}
.legal dl{display:flex; flex-direction:column; gap:0; margin:0; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:6px 20px; box-shadow:var(--shadow)}
.legal dl > div{display:grid; grid-template-columns:190px 1fr; gap:14px; padding:12px 0; border-top:1px solid var(--border)}
.legal dl > div:first-child{border-top:none}
.legal dt{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase}
.legal dd{margin:0; font-size:.92rem; color:var(--ink)}
@media (max-width:640px){ .legal dl > div{grid-template-columns:1fr; gap:2px} }

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--border); background:var(--surface); padding:58px 0 36px; color:var(--ink-3); font-size:.85rem}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:40px}
.foot-tag{color:var(--ink-2); font-size:.9rem; line-height:1.6; max-width:36ch; margin-top:14px}
.foot-secure{display:flex; align-items:center; gap:8px; margin-top:16px; font-size:.8rem; color:var(--ink-2)}
.foot-secure svg{color:var(--good); flex:none}
.foot-col h4{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); font-family:var(--mono); margin:0 0 15px; font-weight:600}
.foot-col a{display:block; color:var(--ink-2); font-size:.9rem; padding:5px 0; transition:color .2s}
.foot-col a:hover{color:var(--scan)}
.foot-bottom{margin-top:46px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start}
.foot-legal{font-size:.76rem; color:var(--ink-3); max-width:82ch; line-height:1.6}
.foot-copy{font-family:var(--mono); font-size:.78rem; color:var(--ink-3); white-space:nowrap}
@media(max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px} }
@media(max-width:520px){ .foot-grid{grid-template-columns:1fr} .foot-bottom{flex-direction:column} }

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} }
