#accueil{min-height:100vh;grid-template-columns:1.1fr .9fr;animation:fondu .35s ease}
#accueil h1,#accueil h2{font-family:Sora,Inter,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.15}

.hero{background:var(--marine);color:#fff;padding:64px 72px;display:flex;flex-direction:column;justify-content:center}
.hero .brand{margin-bottom:auto}
.hero .brand img{width:180px;height:auto;display:block}
.hero h1{font-size:44px;margin:48px 0 18px;max-width:16ch}
.hero p{font-size:17px;color:var(--pale);max-width:46ch;line-height:1.6}
.hero ul{list-style:none;margin-top:40px;border-left:3px solid var(--azur);padding-left:28px;max-width:46ch}
.hero li + li{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.hero li b{display:block;font:700 18px Sora,Inter,sans-serif;margin-bottom:2px}
.hero li small{color:var(--pale);font-size:15.5px;line-height:1.55}
.hero .brand,.hero h1,.hero p,.hero ul{animation:monte .7s var(--ease) both}
.hero h1{animation-delay:.08s}.hero p{animation-delay:.16s}.hero ul{animation-delay:.3s}

.connexion{display:flex;align-items:center;justify-content:center;padding:48px 36px;background:var(--email)}
.cbox{width:100%;max-width:440px;background:#fff;border:1px solid var(--trait);border-radius:20px;padding:40px 36px;animation:monte .6s .1s var(--ease) both}
.cbox.secoue{animation:secoue .45s ease}
.cbox h2{font-size:30px;color:var(--encre)}
.cbox .sub{color:var(--doux);margin:8px 0 28px}
.cbox .field{margin-bottom:18px}
.cbox .field input{font-size:16px;min-height:48px}
#accueil .btn-primary{border-radius:12px;min-height:50px;font-size:16px}
.retour-site{display:inline-block;margin-bottom:22px;color:var(--azur-fonce);font-weight:600;text-decoration:none;transition:color .2s,transform .2s}
.retour-site:hover{color:var(--marine);transform:translateX(-2px)}
.retour-site::before{content:"← "}

.demo{margin-top:28px;padding:16px 18px;background:var(--ciel);border-radius:14px;font-size:14px;color:var(--encre);line-height:1.6}
.demo b{font-weight:700}
.demo code{background:#fff;padding:1px 7px;border-radius:5px;font-size:13.2px;font-weight:600}
.raz{display:block;width:100%;margin-top:13px;font-family:inherit;font-size:13.8px;font-weight:600;
  color:var(--danger);background:#fff;border:1px solid #fecaca;border-radius:10px;padding:9px 13px;cursor:pointer;transition:background-color .2s}
.raz:hover{background:#fef2f2}

@media (max-width:980px){
  #accueil{grid-template-columns:1fr}
  .hero{padding:40px 24px}
  .hero .brand img{width:120px}
  .hero h1{font-size:32px;margin-top:28px}
  .hero ul{display:none}
  .connexion{padding:32px 16px}
  .cbox{padding:28px 20px}
}