/* v22 — home-download. Dernier écran : la conversion.
   Tout est scopé à #download. Aucune règle ne touche .btn-primary (propriété de `global`). */

/* ---------- 1. Le cadre : l'aquarelle fond dans le blanc ---------- */

/* Le cadre suit exactement le format du tableau (1672 × 941 ≈ 56,28 %).
   La min-height de story-v12 le rendait plus haut que large en dessous de
   ~1140 px : object-fit:contain letterboxait alors le tableau et laissait
   ses vraies arêtes à nu, hors de portée du masque. On la neutralise :
   le cadre et le tableau coïncident à toutes les largeurs. */
#download.dl22 .story-frame { min-height: 0; }

/* Le papier de l'aquarelle est légèrement plus chaud que le blanc pur :
   sans masque, on voit deux coutures horizontales nettes en haut et en bas
   du tableau. Le masque est posé sur l'IMAGE, pas sur son conteneur : avec
   object-fit:contain le tableau est parfois letterboxé, et un masque sur le
   conteneur laisserait alors les vraies arêtes du tableau à nu.
   On fond les quatre bords, la colonne de droite un peu plus tôt pour
   dégager la zone de texte. */
#download.dl22 .dl22-art img {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%),
    linear-gradient(to right, #000 0, #000 58%, rgba(0,0,0,.35) 84%, transparent 96%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%),
    linear-gradient(to right, #000 0, #000 58%, rgba(0,0,0,.35) 84%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  /* 2 % de marge pour que la parallaxe (≤ 10 px) ne découvre jamais de bord */
  transform: scale(1.02);
  transform-origin: 42% 60%;
  will-change: transform;
}

/* ---------- 2. Typographie ---------- */

#download.dl22 .story-copy { text-wrap: balance; }

#download.dl22 h2 {
  line-height: 1.04;
  letter-spacing: -.043em;   /* interlettrage optique : le titre le plus gros de la page */
}
#download.dl22 .dl22-line { display: block; }
#download.dl22 .dl22-line-2 { margin-top: .03em; }

/* ---------- 3. Le bouton : même style partagé, plus d'espace et un halo ---------- */

#download.dl22 .story-download {
  gap: 0;                  /* le rythme se règle en marges, pas au gap */
  margin-top: 0;
}

#download.dl22 .dl22-cta {
  position: relative;
  display: inline-flex;
  margin-top: 40px;
}
/* Ombre douce de conteneur : elle appartient au bloc, pas au bouton.
   Elle donne du poids au CTA sans changer sa forme ni sa couleur. */
#download.dl22 .dl22-cta::before {
  content: "";
  position: absolute;
  inset: -34px -48px -46px;
  z-index: -1;
  border-radius: 52px;
  background: radial-gradient(56% 60% at 50% 54%, rgba(0,122,255,.20), rgba(0,122,255,0) 70%);
  opacity: 0;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
#download.dl22 .dl22-cta.is-visible::before { opacity: .8; transition-delay: .34s; }
#download.dl22 .dl22-cta.is-visible:hover::before { opacity: 1; transition-duration: .3s; transition-delay: 0s; }
#download.dl22 .dl22-cta.is-visible:has(#final-cta:focus-visible)::before { opacity: 1; transition-duration: .3s; transition-delay: 0s; }

/* ---------- 4. Réassurance : sobre, vraie, alignée sur le bouton ---------- */

#download.dl22 .dl22-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 20px 0 0;
  padding-left: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .002em;
  color: var(--muted-2);   /* #6b7280 — 4,8:1 sur blanc */
}
#download.dl22 .dl22-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}

/* ---------- 5. Le lien web : secondaire, mais soigné ---------- */

#download.dl22 .dl22-web {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;        /* cible tactile */
  margin-top: 2px;
  padding-right: 2px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.006em;
  color: #4b5563;
  text-decoration: none;
  transition: color .22s cubic-bezier(.2,.7,.2,1);
}
#download.dl22 .dl22-web-text { position: relative; }
#download.dl22 .dl22-web-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: .26;
  transform: scaleX(1);
  transform-origin: left center;
  transition: opacity .24s cubic-bezier(.2,.7,.2,1), transform .34s cubic-bezier(.2,.7,.2,1);
}
#download.dl22 .dl22-web:hover { color: var(--blue); }
#download.dl22 .dl22-web:hover .dl22-web-text::after { opacity: .55; }
#download.dl22 .dl22-web:active { color: #0060cc; }
#download.dl22 .dl22-web-arrow {
  flex: 0 0 auto;
  opacity: .8;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .22s;
}
#download.dl22 .dl22-web:hover .dl22-web-arrow { transform: translate(2px,-2px); opacity: 1; }
#download.dl22 .dl22-web:focus-visible { border-radius: 6px; }

/* ---------- 6. Entrée chorégraphiée ---------- */

.js #download.dl22 .reveal {
  transition-property: opacity, transform;
  transition-duration: .62s;
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
}
.js #download.dl22 .dl22-art  { opacity: 0; transform: none; transition-duration: .95s; }
.js #download.dl22 .dl22-line-1 { opacity: 0; transform: translateY(20px); transition-delay: 60ms; }
.js #download.dl22 .dl22-line-2 { opacity: 0; transform: translateY(20px); transition-delay: 170ms; }
.js #download.dl22 .dl22-cta  { opacity: 0; transform: translateY(16px) scale(.975); transition-delay: 290ms; transition-duration: .58s; }
.js #download.dl22 .dl22-meta { opacity: 0; transform: translateY(12px); transition-delay: 390ms; }
.js #download.dl22 .dl22-web  { opacity: 0; transform: translateY(12px); transition-delay: 460ms; }

.js #download.dl22 .reveal.is-visible { opacity: 1; transform: none; }
.js #download.dl22 .dl22-art.is-visible { opacity: 1; }
.js #download.dl22 .dl22-cta.is-visible { transform: translateY(0) scale(1); }

/* ---------- 7. Mobile 390 ---------- */

@media (max-width: 760px) {
  #download.dl22 .story-frame { min-height: 0; padding-top: 56px; }
  #download.dl22 h2 { letter-spacing: -.036em; line-height: 1.06; }

  #download.dl22 .dl22-cta { display: flex; width: 100%; max-width: 360px; margin-top: 30px; }
  #download.dl22 .dl22-cta > .btn-primary { width: 100%; }
  #download.dl22 .dl22-cta::before { inset: -26px -26px -30px; }

  #download.dl22 .dl22-meta { margin-top: 16px; font-size: 12px; gap: 8px; }
  #download.dl22 .dl22-web { margin-top: 0; }

  /* L'aquarelle ferme la page : on la fond en bas et sur le bord droit,
     là où le muret est coupé net par le cadre du téléphone. Le masque est
     posé sur le conteneur, qui est ici le vrai cadre visible. */
  #download.dl22 .dl22-art {
    height: 400px;
    margin: 26px 0 8px;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, #000 6%, #000 84%, transparent 99%),
      linear-gradient(to right, #000 0, #000 82%, transparent 99%);
    mask-image:
      linear-gradient(to bottom, transparent 0, #000 6%, #000 84%, transparent 99%),
      linear-gradient(to right, #000 0, #000 82%, transparent 99%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  #download.dl22 .dl22-art img {
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- 8. Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  .js #download.dl22 .reveal,
  .js #download.dl22 .dl22-art,
  .js #download.dl22 .dl22-line-1,
  .js #download.dl22 .dl22-line-2,
  .js #download.dl22 .dl22-cta,
  .js #download.dl22 .dl22-meta,
  .js #download.dl22 .dl22-web {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #download.dl22 .dl22-cta::before { opacity: 1; transition: none; }
  #download.dl22 .dl22-web-arrow,
  #download.dl22 .dl22-web-text::after { transition: none; }
}