/* Feuille commune aux pages secondaires (merci, confidentialité).
   La page d'optin garde son CSS en ligne pour s'afficher le plus vite possible. */

@font-face{font-family:"Young Serif";src:url("/fonts/YoungSerif-Regular.woff2?v=1") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Regular.woff2?v=1") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Medium.woff2?v=1") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-SemiBold.woff2?v=1") format("woff2");font-weight:600;font-display:swap}

:root{
  --fond:#0A0D16;
  --blanc:#FFFFFF;
  --cyan:#5BE9FF;
  --cyan-att:#2C7F91;
  --texte:rgba(255,255,255,.80);
  --texte-faible:rgba(255,255,255,.55);
  --ease:cubic-bezier(.215,.61,.355,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",system-ui,sans-serif;
  background:var(--fond);color:var(--texte);line-height:1.65;
  min-height:100svh;-webkit-font-smoothing:antialiased;
}

.fond{position:fixed;inset:0;z-index:-2;background:var(--fond)}
.fond img{width:100%;height:100%;object-fit:cover;display:block}
.scrim{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 42%, rgba(10,13,22,.94) 0%, rgba(10,13,22,.80) 42%, rgba(10,13,22,.30) 100%),
    linear-gradient(to bottom, rgba(10,13,22,.60) 0%, rgba(10,13,22,0) 22%);
}

.page{max-width:720px;margin:0 auto;padding:0 28px}

.marque{display:flex;align-items:center;gap:14px;padding:26px 0 0}
.marque img{
  width:44px;height:44px;border-radius:50%;display:block;
  box-shadow:0 0 0 1px rgba(91,233,255,.55), 0 0 24px rgba(91,233,255,.18);
}
.marque span{font-family:"Young Serif",Georgia,serif;font-size:18px;color:var(--blanc);line-height:1}
.marque a{text-decoration:none;display:flex;align-items:center;gap:14px}

.surtitre{
  font-weight:600;font-size:12px;color:var(--cyan);
  text-transform:uppercase;letter-spacing:.30em;margin-bottom:20px;
}
h1{
  font-family:"Young Serif",Georgia,serif;font-weight:400;
  font-size:clamp(30px,4vw,44px);line-height:1.15;color:var(--blanc);margin-bottom:20px;
}
h2{
  font-family:"Young Serif",Georgia,serif;font-weight:400;
  font-size:21px;line-height:1.3;color:var(--blanc);margin:34px 0 12px;
}
p{margin-bottom:15px}
a{color:var(--cyan)}
strong{color:var(--blanc);font-weight:500}
ul{margin:0 0 15px 20px}
li{margin-bottom:8px}

footer{padding:44px 0 40px;font-size:12.5px;color:rgba(255,255,255,.38)}
footer a{color:rgba(255,255,255,.55);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)}
footer a:hover{color:var(--cyan);border-color:var(--cyan)}

@media (prefers-reduced-motion:no-preference){
  .anim{opacity:0;transform:translateY(30px);filter:blur(9px);animation:entree 1.2s var(--ease) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.30s}.d4{animation-delay:.42s}
  @keyframes entree{to{opacity:1;transform:none;filter:blur(0)}}
}

@media (max-width:600px){
  .page{padding:0 20px}
  h2{font-size:19px;margin-top:28px}
}