/* LA FEUILLE DES PAGES ANNEXES (merci, télécharger, CGV, confidentialité).
   Les jetons sont ceux du :root de site/index.html — la landing reste un
   seul fichier, ses pages satellites partagent celle-ci. Si un jeton change
   là-bas, il change ici : deux endroits, une seule DA. La forêt est le même
   cliché, en fichier (foret.jpg) plutôt qu'en base64 : une page annexe se
   charge derrière la landing, le cache l'a déjà. */
:root{
  --rose-clair:#ffb8cc; --rose-ecoute:#ff9dba; --rose:#b93a63;
  --photo:url(foret.jpg);
  --fond:#f2f1ed;
  --lentille:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 1.5px 1px rgba(255,255,255,.75),
    inset 0 -14px 24px -16px rgba(255,255,255,.9),inset 0 16px 26px -18px rgba(60,70,40,.22);
  --carte:linear-gradient(165deg,rgba(255,255,255,.52),rgba(255,255,255,.34));
  --verre-filtre:blur(4px) saturate(1.55);
  --barre:rgba(255,255,255,.34);--verre-bord:rgba(255,255,255,.9);
  --texte:#1d1d1f;--trait:rgba(30,40,10,.1);
  --accent:#a5cf4d;--accent-encre:#1d1d1f;--sur-encre:#fff;
  --creux:rgba(0,0,0,.05);--ombre:0 8px 26px rgba(30,35,15,.06);
  --scan:repeating-linear-gradient(to bottom,#000 0 .03em,rgba(0,0,0,.3) .03em .052em);
  --neo:#bce35e;
  --max:720px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* le ciel derrière la page, et la forêt qui fond vers lui sur iPhone :
   même raison que dans site/index.html (11/10) */
html{-webkit-text-size-adjust:100%;background:#a6cae9}
body{
  color:var(--texte); min-height:100vh;
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
body::before{content:"";position:fixed;inset:-24px;z-index:0;
  background:var(--photo) center/cover no-repeat;filter:blur(14px)}
@supports (-webkit-touch-callout:none){
  body::before{--fondu:linear-gradient(to bottom,transparent 24px,#000 104px,#000 calc(100% - 114px),transparent calc(100% - 24px));
    -webkit-mask-image:var(--fondu);mask-image:var(--fondu)}
}
main{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:96px 24px 120px}
h1{font-size:clamp(34px,6.4vw,52px);line-height:1.08;letter-spacing:-.026em;font-weight:700}
h2{font-size:clamp(22px,3.6vw,28px);line-height:1.15;letter-spacing:-.022em;font-weight:700;margin:34px 0 10px}
p{font-size:17px;opacity:.86} p+p{margin-top:12px}
.sous{margin-top:10px;font-size:18px;opacity:.78}
b,strong{font-weight:650}
a{color:inherit}
.verre{position:relative;background:var(--carte);border:0;border-radius:26px;padding:28px 30px;margin:28px 0;
  -webkit-backdrop-filter:var(--verre-filtre);backdrop-filter:var(--verre-filtre);
  box-shadow:var(--ombre),var(--lentille)}
.verre::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--verre-bord);border-radius:inherit;opacity:.55;font-size:26px;
  -webkit-mask-image:var(--scan);mask-image:var(--scan)}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;padding:15px 32px;border-radius:999px;
  background:linear-gradient(135deg,#e2f2a6,var(--accent));color:#1c2405;font-size:16.5px;font-weight:600;
  text-decoration:none;border:0;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 18px rgba(165,207,77,.35),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .18s ease,box-shadow .18s ease}
.cta:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(165,207,77,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.cta.large{width:100%}
.etiquette{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
.cle{font:600 clamp(20px,4.6vw,28px)/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;text-align:center;
  padding:18px 14px;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:var(--lentille);
  user-select:all;word-break:break-all}
ol,ul{padding-left:22px;margin-top:10px} li{margin-bottom:8px;opacity:.9}
.fine{margin-top:16px;font-size:14px;opacity:.72;letter-spacing:.005em}
.marque{position:relative;z-index:1;display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--texte);
  font-size:17px;font-weight:650;letter-spacing:-.02em;margin-bottom:34px}
.marque i{width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.6),0 0 14px var(--rose-ecoute);flex:none}
footer{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 24px 40px;font-size:14px;opacity:.7}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.cta{transition:none}}

/* la mention des droits, la même qu'à l'accueil (05/10) : l'article 18 des CGV dit ce qui est protégé */
.droits{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;margin:10px 0 0;font-size:12.5px;opacity:.72}
.droits svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.droits sup{font-size:.62em;line-height:0}
footer .droits a{color:inherit;border-bottom:1px solid currentColor;text-decoration:none}
footer .droits{opacity:1;justify-content:flex-start}   /* le pied de page est déjà atténué, et aligné à gauche ici */