:root{--rouge:#d40043;--rouge-f:#a8003a;--txt:#444;--gris:#686868;--pied:#4d4d4d;--corail:#fe6c61;--violet:#8d6dc4}
*{box-sizing:border-box}
body{margin:0;font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--txt);background:#efefef;line-height:1.5;display:flex;flex-direction:column;min-height:100vh}
a{color:inherit}

header{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.bar{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:block;line-height:0}
.logo img{height:64px;width:auto}

.hero{position:relative;color:#fff;text-align:center;padding:72px 20px 120px;background:linear-gradient(rgba(168,0,58,.88),rgba(212,0,67,.82)),url("img/fond-bureau.png") center/cover}
.hero h1{margin:0 0 10px;font-weight:300;font-size:clamp(1.7rem,4.5vw,2.8rem);text-transform:uppercase;letter-spacing:1px}
.hero p{margin:0;font-size:1.1rem;opacity:.95}

main{position:relative;z-index:1;max-width:1000px;width:100%;margin:-72px auto 0;padding:0 20px 56px;flex:1}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:#fff;padding:32px 30px;box-shadow:0 8px 28px rgba(0,0,0,.14);border-top:4px solid var(--rouge);display:flex;flex-direction:column}
.panel h2{margin:0 0 6px;font-weight:300;text-transform:uppercase;font-size:1.5rem;color:var(--txt)}
.panel p{margin:0 0 22px;color:var(--gris);font-weight:400}
.btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;margin-top:12px;color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;text-transform:uppercase;background:var(--rouge);transition:background .15s,transform .15s}
.btn:hover{background:var(--rouge-f);transform:translateX(3px)}
.btn .arr{width:18px;height:18px;flex:none}
.btn.coral{background:var(--corail)}
.btn.coral:hover{background:#f2432f}
.btn:first-of-type{margin-top:auto}

.apps{margin-top:24px;background:#fff;padding:24px 30px;box-shadow:0 8px 28px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-left:4px solid var(--violet)}
.apps h3{margin:0;font-weight:300;text-transform:uppercase;font-size:1.2rem}
.apps div{display:flex;gap:12px;flex-wrap:wrap}
.apps a{background:var(--violet);color:#fff;text-decoration:none;font-weight:700;font-size:.85rem;text-transform:uppercase;padding:12px 18px}
.apps a:hover{background:#6c4fa3}

.contact{margin-top:24px;text-align:center;color:var(--gris)}
.contact strong{color:var(--rouge);font-weight:400;font-size:1.3rem}
.contact a{text-decoration:none}

footer{background:var(--pied);color:#ddd;padding:20px 16px;font-size:.85rem;text-align:center}

@media (max-width:720px){
  .cols{grid-template-columns:1fr}
  .hero{padding:44px 16px 100px}
  .logo img{height:52px}
  .bar{padding:10px 16px}
  .panel,.apps{padding:24px 20px}
}

.footer-links{margin-top:6px}
.footer-links a{color:#fff}

.legal{position:relative;z-index:1;max-width:900px;width:100%;margin:0 auto;padding:40px 20px 56px;flex:1}
.legal article{background:#fff;padding:36px 40px;box-shadow:0 8px 28px rgba(0,0,0,.14);border-top:4px solid var(--rouge)}
.legal h1{margin:0 0 24px;font-weight:300;text-transform:uppercase;font-size:2rem;color:var(--txt);line-height:1.2}
.legal h2{margin:32px 0 10px;font-weight:600;font-size:1.15rem;color:var(--rouge)}
.legal p,.legal address{margin:0 0 12px;font-style:normal;font-weight:400;color:var(--gris)}
.legal a{color:var(--rouge)}
.back{display:inline-block;margin-top:24px;color:var(--rouge);font-weight:700;text-decoration:none}
@media (max-width:720px){.legal{padding:24px 12px 40px}.legal article{padding:24px 18px}.legal h1{font-size:1.5rem}}