:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#142d42;background:#f2f5f4}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;padding:24px 16px}
.carte{width:min(100%,430px);background:#fff;border:1px solid #dce4e4;border-radius:24px;box-shadow:0 18px 48px #142d4218;padding:35px 29px 27px;text-align:center}
.marque{margin:0 0 25px;font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#236775}
.portrait,.monogramme{width:144px;height:144px;margin:0 auto 24px;border-radius:50%;display:block;object-fit:cover;border:5px solid #edf3f2}
.monogramme{display:grid;place-items:center;background:#e6f0ee;color:#236775;font-size:2.4rem;font-weight:700}
h1{margin:0;font-size:clamp(1.8rem,6vw,2.2rem);line-height:1.15;letter-spacing:-.025em}
.fonction{margin:13px auto 27px;max-width:320px;line-height:1.5;color:#526372;font-size:1rem}
.principal{display:block;padding:17px 18px;border-radius:12px;background:#142d42;color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem}
.principal:hover,.principal:focus-visible{background:#236775}
.aide{margin:12px 4px 26px;font-size:.86rem;line-height:1.4;color:#647582}
nav{display:grid;gap:10px}
nav a{display:block;padding:13px 15px;border:1px solid #d9e2e2;border-radius:10px;color:#142d42;text-decoration:none;font-weight:600}
nav a:hover,nav a:focus-visible{border-color:#236775;background:#f5faf9}
a:focus-visible{outline:3px solid #2597a6;outline-offset:3px}
footer{margin-top:31px;font-size:.83rem;color:#70808a}
@media(max-width:380px){.carte{padding:28px 20px 24px}.portrait,.monogramme{width:128px;height:128px}}