/* Page Drop-in : seulement ses sections propres. Haut de page, bandeau et titres viennent des styles
   communs (accueil, page Hyrox, pages-communes.css). Préfixe di- partout. */

.di-page .hy-hero-copy .v-cta{margin-top:4px}

/* 3. La carte postale, sur le moucheté : le recto en photo, le verso avec le texte. */
.di-post{padding:110px 0}
.di-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1060px;margin:0 auto;padding:20px;border-radius:10px;background:var(--paper);color:var(--night);box-shadow:12px 12px 0 var(--fluo);transform:rotate(-1deg)}
.di-front{position:relative;min-height:440px;margin:0;border-radius:6px;overflow:clip}
.di-front img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.di-back{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:26px 14px 18px 38px;margin-left:24px;border-left:2px dashed #2023224d}
.di-back p{margin:0 0 14px}
.di-back .v-cta{margin-top:10px}
.di-sign{font-weight:850}
.di-back-top{align-self:stretch;display:flex;justify-content:flex-end;align-items:center;margin:0 0 22px}
.di-stamp{position:relative;padding:6px;background:var(--paper);box-shadow:0 0 0 2px #20232233;transform:rotate(3deg)}
.di-stamp-in{display:grid;place-items:center;width:78px;height:92px;background:var(--fluo);color:var(--night);outline:2px dashed var(--night);outline-offset:-7px}
.di-stamp-in b{font-size:26px;font-weight:900;line-height:1}
.di-stamp-wave{width:50px;height:20px;color:var(--night)}
.di-postmark{position:relative;z-index:1;margin-right:-34px;display:grid;place-items:center;align-content:center;width:112px;height:112px;border:3px solid #202322a6;border-radius:50%;color:#202322a6;transform:rotate(-14deg);pointer-events:none}
.di-postmark b{font-size:16px;font-weight:900;letter-spacing:.2em}
.di-postmark i{font-style:normal;font-size:8.5px;font-weight:850;letter-spacing:.14em}
.di-postmark:before,.di-postmark:after{content:'';position:absolute;left:-46px;width:46px;height:9px;border-top:3px solid #202322a6;border-bottom:3px solid #202322a6}
.di-postmark:before{top:38px}
.di-postmark:after{top:58px}
.di-card.is-waiting .di-postmark{opacity:0;transform:rotate(-14deg) scale(1.7)}
.di-card.is-stamped .di-postmark{transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.6,1)}

/* 4. « Votre drop-in » : l'étiquette de bagage, attachée par sa ficelle. */
.di-tag-section{background:var(--sky);padding:100px 0 120px}
.di-tag-wrap{position:relative;display:flex;justify-content:center;padding-left:120px;filter:drop-shadow(10px 10px 0 var(--night))}
.di-string{position:absolute;top:calc(50% - 70px);left:calc(50% - 370px);width:200px;height:120px;overflow:visible;fill:none;stroke:var(--night);stroke-width:3;stroke-linecap:round}
.di-tag{position:relative;width:560px;padding:44px 48px 40px 104px;background:var(--paper);color:var(--night);clip-path:polygon(64px 0,100% 0,100% 100%,64px 100%,0 calc(100% - 64px),0 64px);transform-origin:0 50%;transform:rotate(-2deg);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.di-tag:hover{transform:rotate(1deg)}
.di-hole{position:absolute;top:50%;left:30px;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--sky);box-shadow:inset 0 0 0 4px var(--fluo)}
.di-tag h3{margin:0 0 6px!important}
.di-price{margin:0 0 22px!important;font-size:18px!important}
.di-price b{display:block;font-size:56px;font-weight:900;line-height:1.05;letter-spacing:-.03em}
.di-checks{display:grid;gap:12px;margin:0 0 22px;padding:22px 0;list-style:none;border-top:2px dashed #2023224d;border-bottom:2px dashed #2023224d}
.di-checks li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.45}
.di-check{flex:none;width:24px;height:24px;padding:3px;border-radius:50%;background:var(--fluo);fill:none;stroke:var(--night);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
.di-tag p{margin:0 0 10px}
.di-tag .v-cta{margin-top:14px}

@media(prefers-reduced-motion:reduce){.di-tag{transition:none}.di-card.is-stamped .di-postmark{transition:none}}
@media(max-width:900px){
  .di-card{grid-template-columns:1fr;transform:none}
  .di-back{margin:24px 0 0;padding:24px 8px 8px;border-left:0;border-top:2px dashed #2023224d}
  .di-front{min-height:300px}
  .di-tag-wrap{padding-left:0}
  .di-string{display:none}
  .di-tag{width:100%;padding:40px 20px 34px 76px;transform:none}
  .di-tag .v-cta{gap:10px;padding-left:18px;font-size:14.5px}   /* « Réserver mon drop-in » sur une ligne (téléphone, 08/10) */
  .di-tag{padding-left:66px}
  .di-hole{display:none}   /* 22/10 : le trou du ticket, pensé pour l'ordinateur, tombait au milieu de la liste */
}