/* Maquette du livret des pages de guide. Partagé par toutes les pages
   /rapports/<slug>/, généré par content/build-guides.mjs. */

/* ── La maquette du guide ───────────────────────────────────────────────
   Un livret qui flotte, légèrement incliné, avec la tranche des pages à
   droite et la reliure à gauche. L'ombre portée vient du parent pour
   qu'elle suive la forme pivotée. Couleurs : marine et or de la marque. */
.gd{ grid-template-areas:"intro mock" "list card"; align-items:start; }
.gd__mock{ grid-area:mock; justify-self:center; align-self:center;
           filter:drop-shadow(0 26px 30px rgba(28,41,82,.30)); }
.mocklink{ display:flex; flex-direction:column; align-items:center; text-decoration:none; cursor:pointer; }
.mocktag{ margin-bottom:14px; background:var(--gold); color:var(--navy); font-weight:800;
          font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:7px 15px;
          border-radius:6px; box-shadow:0 8px 18px rgba(28,41,82,.22); }
.bookframe{ position:relative; display:inline-block; line-height:0; }
.bookframe img{
  width:clamp(220px,24vw,310px); height:auto; border-radius:3px 6px 6px 3px; transform-origin:50% 60%;
  transform:perspective(1700px) rotateY(-14deg) rotateX(3deg) rotate(-1.4deg);
  /* tranche de pages à droite, ombre de reliure à gauche */
  box-shadow:3px 2px 0 -1px #efece3, 6px 4px 0 -1px #e2ded1, inset 9px 0 14px -10px rgba(0,0,0,.35);
  animation:bookfloat 6s ease-in-out infinite;
}
@keyframes bookfloat{
  0%,74%,100%{ transform:perspective(1700px) rotateY(-14deg) rotateX(3deg) rotate(-1.4deg) translateY(0) }
  82%{ transform:perspective(1700px) rotateY(-10deg) rotateX(3deg) rotate(1.4deg) translateY(-6px) }
  90%{ transform:perspective(1700px) rotateY(-16deg) rotateX(3deg) rotate(-3deg) translateY(-2px) }
  96%{ transform:perspective(1700px) rotateY(-13deg) rotateX(3deg) rotate(-.4deg) translateY(0) }
}
/* pastille de téléchargement */
.dlbadge{ position:absolute; bottom:7%; right:-4%; z-index:4; width:clamp(44px,10vw,58px);
          aspect-ratio:1; border-radius:50%; background:linear-gradient(180deg,var(--gold-lt),var(--gold));
          display:grid; place-items:center; box-shadow:0 10px 22px rgba(28,41,82,.35);
          animation:dlpulse 2.6s ease-in-out infinite; }
.dlbadge svg{ width:46%; height:46%; stroke:var(--navy); stroke-width:2.4; fill:none;
              stroke-linecap:round; stroke-linejoin:round; }
@keyframes dlpulse{
  0%,100%{ box-shadow:0 10px 22px rgba(28,41,82,.35),0 0 0 0 rgba(201,168,76,.55) }
  70%    { box-shadow:0 10px 22px rgba(28,41,82,.35),0 0 0 13px rgba(201,168,76,0) }
}
.mockcta{ margin-top:16px; font-size:13.5px; font-weight:700; color:var(--navy); text-align:center; }
.mockcta span{ display:block; font-weight:500; color:var(--light); font-size:12.5px; margin-top:3px; }

/* flèche dessinée qui pointe vers le formulaire */
.hint{ display:flex; align-items:center; gap:10px; margin-top:22px;
       font-size:13.5px; font-weight:700; color:var(--gold-dk,#a8863a); }
.hint svg{ flex:0 0 auto; animation:arrowbob 2s ease-in-out infinite; }
@keyframes arrowbob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

@media (max-width:860px){
  .gd{ grid-template-areas:"intro" "mock" "card" "list"; }
  .gd__mock{ margin:4px 0 2px; }
  .bookframe img{ width:clamp(200px,52vw,260px);
                  transform:perspective(1200px) rotateY(-11deg) rotateX(2deg) rotate(-1.2deg); }
  .hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .bookframe img,.dlbadge,.hint svg{ animation:none }
}