:root{
  --blanc:#FFFFFF;
  --encre:#0A0A0C;
  --gris:#6E6E7A;
  --gris-clair:#ECECEF;

  --rouge:#FF2E1F;
  --vert:#00BE55;
  --jaune:#FFC400;
  --bleu:#0057FF;
  --violet:#7A2FF2;
  --rose:#FF3D8B;

  --marge:20px;
  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--blanc);
  color:var(--encre);
  font-family:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left}
figure,h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}

.env{width:100%;max-width:520px;margin:0 auto;padding:0 var(--marge)}
.plein{width:100%;overflow:hidden}

.titre{
  font-weight:800;
  font-size:clamp(40px,11.8vw,70px);
  line-height:.94;
  letter-spacing:-.042em;
}
.chapo{
  font-size:16.5px;line-height:1.42;color:var(--gris);font-weight:400;
  max-width:31ch;
}
.chapo b{color:var(--encre);font-weight:600}

.cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:58px;padding:0 20px;
  background:var(--bleu);color:#fff;
  border-radius:14px;
  box-shadow:0 4px 0 #0040C4;
  font-size:17px;font-weight:700;letter-spacing:-.02em;
  transition:transform .08s ease,box-shadow .08s ease;
}
.cta:active{transform:translateY(3px);box-shadow:0 1px 0 #0040C4}
.cta .sep{width:1px;height:20px;background:rgba(255,255,255,.35)}
.cta.noir{background:var(--encre);box-shadow:0 4px 0 #000}
.cta.rouge{background:var(--rouge);box-shadow:0 4px 0 #C4160B}

.sous-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;font-size:13.5px;color:var(--gris);font-weight:500;
}
.sous-cta .pt{width:3px;height:3px;border-radius:50%;background:#C9C9D2}
.sous-cta b{color:var(--encre);font-weight:600}

.pied{ background:#0A0A0C; color:#9A9AA6; padding:40px 0 34px }
.pied .dedans{ max-width:1120px; margin:0 auto; padding:0 var(--marge) }
.pied-haut{ display:flex; flex-direction:column; gap:26px }
.pied-marque .nom{
  display:block; font-size:17px; font-weight:800; letter-spacing:-.04em; color:#fff;
}
.pied-marque .nom span{ color:var(--rouge) }
.pied-marque p{ margin:8px 0 0; font-size:13.5px; line-height:1.55; max-width:420px }
.pied-liens{ display:flex; flex-wrap:wrap; gap:9px 20px }
.pied-liens a{
  color:#E4E4EB; text-decoration:none; font-size:13.5px; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:2px;
}
.pied-liens a:hover{ color:#fff; border-bottom-color:#fff }
.pied-bas{
  margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px; line-height:1.6;
}
.pied-bas p{ margin:0 0 8px }
.pied-bas p:last-child{ margin-bottom:0 }
.pied-bas b{ color:#C9C9D2; font-weight:700 }

@media (min-width:760px){
  .pied-haut{ flex-direction:row; justify-content:space-between; align-items:flex-start; gap:48px }
  .pied-liens{ justify-content:flex-end; max-width:560px }
}