/* Évolutions décoratives et responsive — La Crevette Rose.
Fichier indépendant : ne remplace ni style.css ni mobile.css. */
/* Séparation fine et régulière entre rubriques ; les rubriques masquées ne créent aucun vide. */
main > section + section{border-top:1px solid rgba(208,115,154,.35)}
main > section + section::before{
content:'✦';position:absolute;top:-12px;left:50%;transform:translateX(-50%);
padding:0 16px;background:inherit;color:#cf779b;font-size:18px;line-height:24px;
pointer-events:none;z-index:1
}
/* Actualités : un seul rang défilant, trois colonnes visibles à l'écran sur ordinateur. */
.actualites-carrousel{position:relative;margin-top:25px;display:flex;align-items:center;gap:8px;min-width:0}
.actualites-carrousel .actualites-grille{
min-width:0;flex:1;display:flex;gap:24px;margin-top:0;
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
scrollbar-width:thin;scroll-padding-inline:2px;padding:8px 2px 18px;
-webkit-overflow-scrolling:touch
}
.actualites-carrousel .actualite-carte{box-sizing:border-box;flex:0 0 calc((100% - 48px) / 3);min-width:0;scroll-snap-align:start}
.actualites-fleche{
flex:none;display:grid;place-items:center;width:38px;height:48px;border-radius:50%;
border:1px solid #ce8ea8;background:#fffdfd;color:#8e315b;font-size:2rem;cursor:pointer;
box-shadow:0 3px 10px #0001
}
.actualites-fleche:hover:not(:disabled){background:#f9e9f0}
.actualites-fleche:disabled{opacity:.3;cursor:default}
.actualites-fleche[hidden]{display:none!important}
/* Survol réservé aux vrais pointeurs, sans état hover collant sur écran tactile. */
@media(hover:none), (pointer:coarse){
.carte:hover .in{transform:none}
.carte.flip .in{transform:rotateY(180deg)}
.carte:focus-visible:not(.flip) .in{transform:none}
}
@media(max-width:767px){
.actualites-carrousel{gap:4px}
.actualites-carrousel .actualites-grille{gap:12px}
.actualites-carrousel .actualite-carte{flex-basis:100%;width:100%}
.actualites-fleche{width:28px;height:42px;font-size:1.5rem}
.bulles{display:block!important}
.bulles i{font-size:.85rem!important;opacity:.14!important}
main > section + section::before{font-size:15px;top:-10px;padding:0 10px}
}
@media(prefers-reduced-motion:reduce){.bulles{display:none!important}}
/* Commande facultative de son sur l'écran des trois coups. */
#son-coups{display:block;margin:10px auto 0;border:1px solid #f4d8e3;
border-radius:20px;padding:5px 15px;background:#25131d99;color:#fff;cursor:pointer;font:600 .85rem 'DM Sans',sans-serif}
#son-coups:hover{background:#4d2037}
/* 10/11 — Les spectacles reprennent le carrousel des actualités. */
.spectacles-carrousel{display:flex;align-items:center;gap:8px;min-width:0;margin-top:30px}
#spectacles .spectacles-carrousel .affiches{
display:flex;flex-wrap:nowrap;grid-template-columns:none;align-items:stretch;
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:thin;
flex:1;min-width:0;max-width:none;margin:0;
gap:24px;padding:8px 7px 24px;
}
#spectacles .spectacles-carrousel .affiches.single{justify-content:flex-start}
#spectacles .spectacles-carrousel .bs-carte{flex:0 0 calc((100% - 48px) / 3);min-width:0;scroll-snap-align:start}
.spectacles-fleche{flex:none;display:grid;place-items:center;width:38px;height:48px;border-radius:50%;border:1px solid #ce8ea8;background:#fffdfd;color:#8e315b;font-size:2rem;cursor:pointer;box-shadow:0 3px 10px #0001}
.spectacles-fleche:hover:not(:disabled){background:#f9e9f0}
.spectacles-fleche:disabled{opacity:.3;cursor:default}
.spectacles-fleche[hidden]{display:none!important}
/* Laisser l'affiche lisible, même en présence de cartes très longues. */
#spectacles .spectacles-carrousel .bs-carte:hover{transform:none!important}
/* Animation mobile : les règles suivantes reprennent la main sur les styles du mobile. */
@media(max-width:767px){
.actualites-carrousel,.spectacles-carrousel{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px;row-gap:9px;align-items:center}
.actualites-carrousel .actualites-grille,#spectacles .spectacles-carrousel .affiches{grid-column:1/-1;grid-row:1;min-width:0;width:100%;margin:0;display:flex;gap:12px}
.actualites-carrousel .actualite-carte,#spectacles .spectacles-carrousel .bs-carte{flex:0 0 100%;width:100%;max-width:100%;min-width:0}
.actualites-fleche,.spectacles-fleche{grid-row:2;width:42px;height:34px;font-size:1.6rem;border-radius:20px;justify-self:center}
.actualites-prev,.spectacles-prev{grid-column:2}
.actualites-next,.spectacles-next{grid-column:3}
.bulles{display:block!important;position:fixed!important;inset:0!important;z-index:3!important;visibility:visible!important;overflow:hidden;pointer-events:none}
.bulles i{display:block!important;visibility:visible!important;position:absolute!important;bottom:-32px!important;font-size:1rem!important;opacity:.38!important;animation:flotte linear infinite!important;filter:drop-shadow(0 1px 1px #0003)}
}
@media(prefers-reduced-motion:reduce){.bulles,.bulles i{display:none!important}}
/* Spectacles — cartes horizontales larges et affiche dimensionnée selon la hauteur du texte.
Seule la section Nos spectacles est affectée ; les tickets conservent leur style. */
#spectacles .spectacles-liste{margin:24px auto 0;width:100%;max-width:1320px;min-width:0}
#spectacles .spectacles-liste #liste-spectacles,
#spectacles .spectacles-liste #liste-spectacles.single{
display:flex!important;flex-direction:column!important;align-items:stretch!important;
gap:22px!important;overflow:visible!important;max-width:none!important;
margin:0!important;padding:8px 10px 16px!important;scroll-snap-type:none!important
}
#spectacles .spectacles-liste .bs-carte{
box-sizing:border-box;display:grid!important;
grid-template-columns:minmax(180px,30%) minmax(0,1fr)!important;
align-items:stretch!important;column-gap:24px;min-width:0;width:100%;max-width:none;
flex:none!important;transform:none!important;
border:2px solid #47313b;border-radius:10px;
box-shadow:3px 3px 0 var(--rose);
}
#spectacles .spectacles-liste .bs-carte:nth-child(odd),
#spectacles .spectacles-liste .bs-carte:nth-child(even),
#spectacles .spectacles-liste .bs-carte:hover{transform:none!important}
/* L'affiche occupe toute la hauteur utile générée par le texte, sans être déformée.
Position absolute : elle ne détermine pas artificiellement la hauteur de la carte. */
#spectacles .spectacles-liste .bs-visuel{
position:relative!important;align-self:stretch!important;
width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
aspect-ratio:auto!important;padding:0!important;background:transparent!important;
display:block!important;overflow:hidden;
}
#spectacles .spectacles-liste .bs-affiche-ouvrir{
position:absolute!important;inset:14px 0 14px 14px;display:block!important;
width:calc(100% - 14px)!important;height:calc(100% - 28px)!important;
padding:0!important;border:0;background:#faf4ed;border-radius:6px;
cursor:zoom-in;overflow:hidden;box-shadow:0 2px 9px #0002;
}
#spectacles .spectacles-liste .bs-affiche-ouvrir:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
#spectacles .spectacles-liste .bs-affiche-ouvrir img{
display:block!important;width:100%!important;height:100%!important;
max-height:none!important;aspect-ratio:auto!important;
object-fit:contain!important;cursor:zoom-in;background:#faf4ed;
}
#spectacles .spectacles-liste .bs-affiche-zoom{
position:absolute;bottom:0;left:0;right:0;display:block;padding:5px;
color:#fff;background:#17101acc;text-align:center;font:600 11px/1.3 'DM Sans',sans-serif;
}
#spectacles .spectacles-liste .bs-txt{
padding:20px 24px 20px 0!important;display:flex;flex-direction:column;
gap:9px!important;min-width:0;
}
#spectacles .spectacles-liste .bs-txt h3{font-size:clamp(1.1rem,1.6vw,1.45rem)!important;line-height:1.25}
#spectacles .spectacles-liste .bs-resume{font-size:.96rem;line-height:1.5}
#spectacles .spectacles-liste .bs-seances{margin-top:5px!important;padding-top:0!important;gap:8px!important}
#spectacles .spectacles-liste .bs-mini-billet{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-width:0}
#spectacles .spectacles-liste .bs-mini-details{padding:10px 12px!important;gap:5px!important;font-size:.88rem}
#spectacles .spectacles-liste .bs-bouton-billet{
margin:8px 10px!important;min-width:173px;max-width:240px;min-height:44px;
font-size:.88rem;padding:8px 13px;
/* Les découpes de ticket restent gérées par le CSS existant. */
}
.bs-affiche-dialog{padding:0;border:0;border-radius:8px;background:#fff;max-width:min(92vw,780px);max-height:92vh;overflow:visible;box-shadow:0 22px 80px #0008}
.bs-affiche-dialog::backdrop{background:#100914d9}
.bs-affiche-dialog-inner{position:relative;display:flex;justify-content:center;align-items:center;max-height:90vh;padding:12px}
.bs-affiche-dialog img{display:block;width:auto;height:auto;max-width:min(86vw,740px);max-height:calc(90vh - 24px);object-fit:contain}
.bs-affiche-fermer{position:absolute;right:-12px;top:-12px;z-index:2;display:grid;place-items:center;width:38px;height:38px;border:1px solid #ddd;border-radius:50%;background:#17101a;color:white;font-size:28px;line-height:1;cursor:pointer}
@media(max-width:850px){
#spectacles .spectacles-liste .bs-carte{grid-template-columns:minmax(150px,32%) minmax(0,1fr)!important;column-gap:16px}
#spectacles .spectacles-liste .bs-txt{padding:15px 13px 15px 0!important}
#spectacles .spectacles-liste .bs-mini-billet{grid-template-columns:minmax(0,1fr)}
#spectacles .spectacles-liste .bs-bouton-billet{margin:2px 9px 10px!important;max-width:none;min-width:0}
}
@media(max-width:560px){
#spectacles .spectacles-liste{margin-top:18px}
#spectacles .spectacles-liste #liste-spectacles{gap:16px!important;padding:4px 3px 13px!important}
#spectacles .spectacles-liste .bs-carte{grid-template-columns:minmax(0,1fr)!important;column-gap:0;}
#spectacles .spectacles-liste .bs-visuel{
width:100%!important;height:260px!important;min-height:260px!important;
padding:0!important;overflow:visible;
}
#spectacles .spectacles-liste .bs-affiche-ouvrir{
inset:14px 15px 0!important;width:calc(100% - 30px)!important;height:246px!important;
}
#spectacles .spectacles-liste .bs-txt{padding:14px 17px 17px!important;gap:7px!important}
#spectacles .spectacles-liste .bs-txt h3{font-size:1.12rem!important}
#spectacles .spectacles-liste .bs-resume{font-size:.9rem}
#spectacles .spectacles-liste .bs-mini-details{font-size:.82rem;padding:9px!important}
}
/* ============================================================
LA TROUPE — coin de feuille réellement recourbé, animé en permanence
Face avant uniquement : un seul pseudo-élément (::after) portant un SVG
animé (SMIL) en image de fond. Aucun JS, aucune modif du HTML, aucun effet
sur la rotation 3D ni sur la zone cliquable des cartes.
Couleur du dessous du coin : fill='%23e6dde2' dans l'image ci-dessous
(à caler sur le fond derrière tes cartes).
============================================================ */
#liste-troupe .carte .face.av {
position: relative;
overflow: hidden;
isolation: isolate;
}
#liste-troupe .carte .face.av::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: min(96px, 34%);
aspect-ratio: 1;
background: url("data:image/svg+xml,") no-repeat right bottom / 100% 100%;
pointer-events: none;
z-index: 6;
}
/* Mouvement réduit : coin figé, à demi soulevé. */
@media (prefers-reduced-motion: reduce) {
#liste-troupe .carte .face.av::after {
background-image: url("data:image/svg+xml,");
}
}
/* Brigadier élégant sur l'écran des trois coups : aucun nouveau décor. */
#rideau .rideau-txt{isolation:isolate}
#rideau #coups[hidden]{display:none!important}
#rideau .lcr-brigadier{display:none;position:relative;width:min(330px,78vw);height:138px;margin:0 auto;pointer-events:none}
#rideau .lcr-brigadier.actif{display:block}
#rideau .lcr-brigadier svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px rgba(34,0,15,.48))}
#rideau #lcr-baton{will-change:transform}
#rideau #lcr-impact{opacity:0}
@media (max-width:767px){#rideau .lcr-brigadier{width:min(300px,82vw);height:125px}}
@media (max-height:650px){#rideau .lcr-brigadier{height:110px}}
/* 11/11 — La crevette bat les trois coups : PNG originaux, sans vidéo en boucle. */
#rideau .lcr-crevette-coups{
position:relative;height:min(58vh,540px);aspect-ratio:588/900;
max-width:86vw;margin:0 auto;isolation:isolate;
}
#rideau .lcr-crevette-coups img{
display:block!important;position:absolute;inset:0;
width:100%!important;height:100%!important;max-width:100%!important;
object-fit:contain;animation:none!important;transform:none!important;
border:0;filter:none;
}
#rideau .lcr-crevette-bas{opacity:0!important}
#rideau .lcr-crevette-coups.frappe .lcr-crevette-haut{opacity:0!important}
#rideau .lcr-crevette-coups.frappe .lcr-crevette-bas{opacity:1!important}
#rideau #coups[hidden]{display:none!important}
#rideau .trois{margin:4px auto 12px;min-height:49px;height:49px;align-items:center}
#rideau .trois span{font-size:clamp(1.9rem,4vw,2.5rem)}
#rideau.ouvert .rideau-txt{transition:opacity 2.8s ease!important;opacity:0!important;pointer-events:none}
@media(max-width:767px){
#rideau .lcr-crevette-coups{height:min(56vh,490px);max-width:88vw}
#rideau .trois{height:45px;min-height:45px;margin:3px auto 10px}
}
@media(max-height:620px){#rideau .lcr-crevette-coups{height:48vh}}