/* Erdica Solutions – page unique v2 (2026-10-18 ; fond « Réseau de sites » 2026-10-21). Palette et police reprises du site précédent (bannière au crépuscule). */
:root{
  --plum-950:#150a10;--plum-900:#23131d;--plum-700:#3e2634;
  --mauve-300:#bd8a79;--trail:#c86e56;--glow:#ecbc94;
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);color:#fff;background:var(--plum-950);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;width:100%}
.hero{position:relative;flex:1 0 auto;display:flex;align-items:center;background:#2D1A25 url(hero-reseau.webp) 70% 50%/cover no-repeat;background-image:url(hero-reseau.svg)}
.hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(21,10,16,.55) 0%,rgba(21,10,16,.30) 40%,rgba(21,10,16,0) 65%),
  linear-gradient(0deg,rgba(21,10,16,.60) 0%,rgba(21,10,16,0) 30%)}
.hero .wrap{position:relative;padding-top:72px;padding-bottom:72px}
.hero-inner{max-width:640px}
.mark{display:inline-flex;align-items:center;gap:14px;margin-bottom:40px;color:#fff}
.mark img{width:56px;height:56px}
.mark-text{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.mark-text b{font-weight:800;letter-spacing:.22em;font-size:24px}
.mark-text span{font-weight:500;letter-spacing:.42em;font-size:12px;color:var(--glow);margin-top:6px}
h1{font-size:clamp(32px,4.4vw,52px);line-height:1.12;margin:0 0 22px;font-weight:800;letter-spacing:-.01em}
h1 em{font-style:normal;color:var(--glow)}
.lead{font-size:clamp(17px,1.6vw,20px);color:#f0e2da;margin:0 0 18px;max-width:580px}
.en{margin-top:34px;padding-left:16px;border-left:2px solid var(--trail);color:var(--mauve-300);font-size:15px;max-width:520px}
.en p{margin:0}
footer{background:var(--plum-950);color:#bfa8a0;font-size:14px;padding:28px 0;border-top:1px solid rgba(236,188,148,.15)}
@media (max-width:720px){
  .hero{background-position:78% 50%}
  .hero::before{background:linear-gradient(180deg,rgba(21,10,16,.70) 0%,rgba(21,10,16,.62) 55%,rgba(21,10,16,.85) 100%)}
  .hero .wrap{padding-top:56px;padding-bottom:56px}
  .mark{margin-bottom:32px}.mark img{width:46px;height:46px}
  .mark-text b{font-size:20px;letter-spacing:.2em}.mark-text span{font-size:10.5px;letter-spacing:.38em}
}