/* Styles propres à templates/scenario/detail.html.twig (déplacés depuis son bloc <style>). */
.fil{font-size:.88rem;color:var(--brume);padding-top:26px}
.fil a{color:var(--brume);text-decoration:none}
.fil a:hover{color:var(--papier)}

.hero-scenario{padding:34px 0 60px;background:radial-gradient(ellipse 70% 55% at 75% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),var(--fond-page)}
.hero-grid-scenario{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
.theme-tag{display:inline-block;font-family:'Special Elite',monospace;color:var(--accent);border:1px solid var(--accent);padding:5px 12px;border-radius:3px;font-size:.9rem;margin-bottom:18px}
h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.05;margin-bottom:16px}
.pitch{color:var(--brume);font-size:1.12rem;max-width:32em;margin-bottom:28px}

.avert{border-left:3px solid var(--tampon);background:var(--tampon-fond);padding:14px 18px;border-radius:0 4px 4px 0;font-size:.95rem;margin-bottom:12px}
.avert strong{color:var(--rouge-texte)}

.fiche{position:relative;background:var(--papier);color:var(--encre);border-radius:3px;padding:30px 28px 26px;box-shadow:0 24px 60px var(--ombre-portee);transform:rotate(1.2deg)}
.fiche::before{content:"";position:absolute;inset:0;margin:8px;border:1px solid var(--encre-cadre);border-radius:3px;pointer-events:none}
.fiche h2{font-family:'Special Elite',monospace;font-size:1.1rem;margin-bottom:14px}
.fiche table{width:100%;border-collapse:collapse;font-size:.97rem}
.fiche td{padding:9px 0;border-bottom:1px dashed var(--encre-trait);vertical-align:top}
.fiche tr:last-child td{border-bottom:none}
.fiche td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.locks{letter-spacing:2px}
.prix-bloc{margin-top:20px;padding-top:16px;border-top:2px solid var(--encre);display:flex;align-items:center;justify-content:space-between;gap:14px}
.prix-bloc .montant{font-family:'Fraunces',serif;font-weight:900;font-size:2.1rem}
.prix-bloc small{display:block;font-weight:400;font-size:.78rem;color:var(--encre-douce)}
.fiche .btn{background:var(--tampon);border-color:var(--tampon);color:var(--papier)}
.fiche .btn:hover,.fiche .btn:focus-visible{background:var(--tampon-survol)}

.histoire p{max-width:42em;color:var(--brume);margin-bottom:16px}
.histoire p:first-of-type{color:var(--papier);font-size:1.08rem}

.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.checklist{list-style:none;margin-top:6px}
.checklist li{padding:10px 0 10px 32px;position:relative;color:var(--brume);border-bottom:1px solid var(--bordure)}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}

.avis-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.avis-carte{background:var(--fond-carte);border:1px solid var(--bordure);border-radius:6px;padding:24px}
.avis-carte .etoiles{color:var(--laiton);letter-spacing:3px;margin-bottom:10px}
.avis-carte p{color:var(--brume);font-size:.96rem;margin-bottom:12px}
.avis-carte footer{font-family:'Special Elite',monospace;font-size:.85rem;color:var(--papier)}

.final-scenario{text-align:center;padding:70px 0 90px;background:radial-gradient(ellipse 60% 80% at 50% 100%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%), var(--fond-page)}
.final-scenario p{color:var(--brume);max-width:30em;margin:0 auto 28px}

@media (max-width:860px){
    .hero-grid-scenario{grid-template-columns:1fr;gap:44px}
    .fiche{transform:rotate(.8deg)}
    .deux-col{grid-template-columns:1fr}
    .avis-grid{grid-template-columns:1fr}
}

/* Lien « Offrir ce scénario à un ami » sous le prix (fiche papier : texte encre). */
.fiche .offrir{margin-top:14px;font-size:.92rem;color:var(--encre-douce)}
.fiche .offrir a{color:var(--encre);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.fiche .offrir a:hover,.fiche .offrir a:focus-visible{color:var(--tampon)}

/* Promotion en cours (fiche papier) : tampon et message, prix barré dans .prix-bloc. */
.fiche .promo-fiche{display:flex;align-items:center;gap:14px;margin-top:18px}
.fiche .promo-fiche p{margin:0;font-size:.92rem;color:var(--encre)}
.prix-bloc .prix-promo{flex-direction:column;gap:0}
.prix-bloc .prix-promo .prix-barre{font-size:1.1rem;font-weight:700}

/* Accès d’un an terminé : invitation à racheter. */
.fiche .acces-termine{margin-top:18px;padding:10px 12px;border:1px solid var(--bordure-accent);border-radius:4px;background:var(--laiton-halo);font-size:.9rem}

/* Petits écrans : le prix et son explication (« accès 1 an à partir de l’achat · parties
   illimitées ») au-dessus du bouton, pour que le prix ne se coupe jamais. */
.prix-bloc .montant{white-space:nowrap}
.prix-bloc small{white-space:normal}
@media (max-width:480px){
    .prix-bloc{flex-direction:column;align-items:stretch}
    .prix-bloc .btn{text-align:center}
}