/* ===== LA CREVETTE ROSE – styles ===== */
:root{--rose:#e0115f;--rose-f:#9c0a40;--creme:#fdf0e2;--noir:#17101a;--or:#e0a73c;--ombre:0 10px 30px rgba(23,16,26,.25)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font:17px/1.6 'DM Sans',system-ui,sans-serif;background:var(--creme);color:var(--noir);overflow-x:hidden}
h1,h2{font-family:'Fraunces',Georgia,serif;line-height:1.05}
a{color:var(--rose)}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;z-index:99;background:#fff;padding:8px}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
section{padding:30px 6vw;position:relative}
.sombre{background:var(--noir);color:var(--creme)}
.sombre h2{color:#fff}
.acte{font:700 1.6rem 'Caveat',cursive;color:var(--rose);transform:rotate(-3deg);display:inline-block}
h2{font-size:clamp(2.4rem,6vw,3.5rem);font-weight:600;margin-bottom:20px}
.lead{font-size:1.15rem;margin:0 0 28px}

/* boutons */
.btn{display:inline-block;background:var(--rose);color:#fff;border:0;border-radius:50px;padding:13px 26px;font:600 1rem 'DM Sans',sans-serif;cursor:pointer;text-decoration:none;box-shadow:0 5px 0 var(--rose-f);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(2px) rotate(-1deg);box-shadow:0 3px 0 var(--rose-f)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--rose-f)}
.btn.ghost{background:transparent;color:var(--noir);box-shadow:inset 0 0 0 2px var(--noir)}
.btn.gold{background:var(--or);color:var(--noir);box-shadow:0 5px 0 #a87617}

/* navigation */
.nav{    max-height: 114px;position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:8px 5vw;background:rgba(253,240,226,.92);backdrop-filter:blur(8px);border-bottom:3px solid var(--rose)}
.brand{display:flex;align-items:center;gap:10px;font:900 1.2rem 'Fraunces',serif;text-decoration:none;color:var(--rose)}
.brand img{transition:transform .4s}.brand:hover img{transform:rotate(-6deg) scale(1.2)}
.nav nav{display:flex;gap:6px}
.nav nav a{color:var(--noir);text-decoration:none;font-weight:600;padding:6px 12px;border-radius:30px;transition:.2s}
.nav nav a:hover,.nav nav a.on{background:var(--rose);color:#fff;transform:rotate(-3deg)}
.burger{display:none;background:none;border:0;font-size:1.8rem;cursor:pointer}

/* rideau d'entrée */
#rideau{position:fixed;inset:0;z-index:100;display:grid;place-items:center}
.pan{position:absolute;top:0;bottom:0;width:51%;background:repeating-linear-gradient(90deg,#b00c4c 0 30px,#e0115f 60px 90px,#b00c4c 120px);box-shadow:inset 0 0 80px rgba(0,0,0,.45);transition:transform 1.8s cubic-bezier(.7,0,.2,1)}
.pan.g{left:0}.pan.d{right:0}
.rideau-txt{position:relative;text-align:center;transition:opacity .5s}
.rideau-txt img{animation:bond 1.4s ease-in-out infinite}
.trois{display:flex;gap:14px;justify-content:center;height:60px;margin:30px}
.trois span{font:900 2.5rem 'Fraunces',serif;color:var(--or);opacity:0;transform:scale(.3)}
.trois span.on{animation:pop .5s forwards}
#rideau.ouvert .pan.g{transform:translateX(-102%)}
#rideau.ouvert .pan.d{transform:translateX(102%)}
#rideau.ouvert .rideau-txt{opacity:0}
#rideau.fini{display:none}
@keyframes bond{50%{transform:translateY(-14px) rotate(4deg)}}
@keyframes pop{to{opacity:1;transform:scale(1)}}

/* prologue */
.hero{padding-top:110px;text-align:center;overflow:hidden;min-height:100vh}
.bandeau-wrap{position:relative;max-width:1000px;margin:0 auto 30px;border-radius:18px;overflow:hidden;box-shadow:var(--ombre);transform:rotate(-1deg)}
.bandeau-wrap img{display:block;width:100%}
.spot{position:absolute;inset:0;background:radial-gradient(circle 160px at var(--x,50%) var(--y,50%),transparent 0,rgba(255,255,255,.25) 100%);pointer-events:none;mix-blend-mode:soft-light}
.accroche{font-size:clamp(2.2rem,6vw,4.8rem);font-weight:900;margin-bottom:18px}
.accroche em{color:var(--rose);font-style:italic;display:inline-block;animation:wob 3s ease-in-out infinite}
.accroche em:nth-of-type(2){animation-delay:.6s}
@keyframes wob{50%{transform:rotate(-4deg) scale(1.06)}}
.hero .lead{margin:0 auto 28px}
.applause{margin-top:36px}.applause p{margin-top:12px}
.clap{position:fixed;font-size:2rem;pointer-events:none;z-index:60;animation:monte 1.4s ease-out forwards}
@keyframes monte{to{transform:translate(var(--dx),-260px) rotate(var(--r));opacity:0}}
.bulles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bulles i{position:absolute;bottom:-40px;font-style:normal;font-size:1.6rem;opacity:.5;animation:flotte linear infinite}
@keyframes flotte{to{transform:translateY(-110vh) rotate(40deg)}}

/* affiches */
.affiches{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px;margin-top:30px}
.affiche{background:#fff;border:3px solid var(--noir);border-radius:14px;overflow:hidden;box-shadow:8px 8px 0 var(--rose);transition:transform .3s}
.affiche:nth-child(odd){transform:rotate(-1.5deg)}.affiche:nth-child(even){transform:rotate(1.5deg)}
.affiche:hover{transform:rotate(0) translateY(-8px) scale(1.02)}
.visuel{height:200px;display:grid;place-items:center;font-size:5rem;background:var(--c1);position:relative;overflow:hidden}
.visuel::after{content:"IMAGE TEMPORAIRE";position:absolute;bottom:6px;right:8px;font:600 .6rem sans-serif;opacity:.6;color:#fff}
.visuel span{transition:transform .5s}.affiche:hover .visuel span{transform:rotate(20deg) scale(1.3)}
.affiche div.txt{padding:20px}.affiche h3{font:900 1.5rem 'Fraunces',serif;margin-bottom:6px}
.meta{font-weight:600;color:var(--rose);margin-top:10px}

/* billets */
.billets{display:grid;gap:22px;margin-top:20px}
.billet{display:grid;grid-template-columns:130px 1fr auto;background:var(--creme);color:var(--noir);border-radius:14px;position:relative;transition:transform .3s}
.billet:hover{transform:scale(1.02) rotate(-.6deg)}
.billet::before,.billet::after{content:"";position:absolute;left:118px;width:24px;height:24px;border-radius:50%;background:var(--noir)}
.billet::before{top:-12px}.billet::after{bottom:-12px}
.souche{display:grid;place-items:center;text-align:center;border-right:3px dashed var(--noir);padding:14px;font:900 2.2rem 'Fraunces',serif;color:var(--rose);line-height:1}
.souche small{display:block;font:600 .8rem 'DM Sans',sans-serif;color:var(--noir)}
.billet .corps{padding:18px 22px}.billet h3{font:900 1.3rem 'Fraunces',serif}
.billet .actions{display:flex;flex-direction:column;gap:10px;justify-content:center;padding:18px}
.billet .btn{font-size:.9rem;padding:10px 18px;text-align:center}

/* troupe */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;margin-top:20px}
.carte{perspective:900px;height:360px;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:center;cursor:pointer}
.carte .in{position:relative;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.carte:hover .in,.carte:focus-visible .in,.carte.flip .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;border:3px solid var(--noir);padding:20px;display:flex;flex-direction:column;align-items:center;justify-content: space-evenly;gap:8px}
.face.av{background:#fff}.face.ar{background:var(--rose);color:#fff;transform:rotateY(180deg)}
.avatar{width:230px;height:230px;border-radius:50%;display:grid;place-items:center;font-size:3.6rem;background:var(--c1);border:3px solid var(--noir)}
.face h3{font:900 1.3rem 'Fraunces',serif}.role{font:700 1.3rem 'Caveat',cursive;color:var(--rose)}

/* galerie */
.pellicule{display:flex;gap:14px;overflow-x:auto;padding:20px 0;scroll-snap-type:x mandatory}
.pellicule figure{flex:0 0 260px;height:190px;border:8px solid #000;outline:2px dashed #fff3;border-radius:6px;display:grid;place-items:center;font-size:3.4rem;background:var(--c1);scroll-snap-align:center;transition:transform .3s;position:relative}
.pellicule figure:hover{transform:rotate(-3deg) scale(1.08)}
.pellicule figcaption{position:absolute;bottom:4px;left:8px;font:600 .75rem sans-serif;color:#fff}
.video{max-width:800px;margin:30px auto 0;aspect-ratio:16/9;border:5px solid var(--or);border-radius:12px;overflow:hidden}
.video iframe{width:100%;height:100%;border:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px}
.contact-grid p{margin-bottom:14px}
.rs{display:flex;gap:10px;flex-wrap:wrap}.rs a{background:var(--noir);color:#fff;padding:8px 16px;border-radius:30px;text-decoration:none;transition:.2s}.rs a:hover{background:var(--rose);transform:rotate(4deg)}
form label{display:block;font-weight:600;margin-bottom:14px}
input,textarea{width:100%;padding:12px;border:3px solid var(--noir);border-radius:10px;font:inherit;background:#fff;margin-top:4px}
input:focus,textarea:focus{border-color:var(--rose);outline:0}
footer{background:var(--rose);color:#fff;text-align:center;padding:24px}

/* mascotte */
#mascotte{position:fixed;right:10px;bottom:0;z-index:70;background:none;border:0;cursor:pointer;transform:translateY(40%);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
#mascotte.sort{transform:translateY(8%)}
#mascotte img{display:block;filter:drop-shadow(0 4px 6px #0005)}
#mascotte.clac img{animation:clac .5s}
@keyframes clac{30%{transform:scale(1.3) rotate(-15deg)}60%{transform:scale(.9) rotate(10deg)}}
#bulle{position:absolute;right:80px;bottom:60px;width:max-content;max-width:200px;background:#fff;border:3px solid var(--noir);border-radius:16px 16px 0 16px;padding:8px 12px;font:700 1.05rem 'Caveat',cursive;line-height:1.2;opacity:0;transform:scale(.5);transform-origin:bottom right;transition:.3s;text-align:left;color:var(--noir)}
#mascotte.parle #bulle{opacity:1;transform:scale(1)}

/* apparition au défilement */
.reveal{opacity:0;transform:translateY(40px) rotate(1deg);transition:opacity .7s,transform .7s}
.reveal.vu{opacity:1;transform:none}

@media(max-width:800px){
  .burger{display:block}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--creme);padding:12px;border-bottom:3px solid var(--rose)}
  .nav nav.ouvert{display:flex}
  .billet{grid-template-columns:90px 1fr}.billet .actions{grid-column:1/-1;flex-direction:row;padding:0 18px 18px}
  .billet::before,.billet::after{left:78px}
  #mascotte img{width:64px;height:64px}#bulle{right:60px;bottom:40px;max-width:160px}
}
/* accessibilité : réduction des animations */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .bulles{display:none}
}

/* Bandeau officiel et ouverture lente du rideau */
.hero{padding-top:76px}
.bandeau-wrap{width:100%;max-width:none;margin:0 auto 30px;border-radius:0;box-shadow:none;transform:none}
.bandeau-wrap img{width:100%;height:auto}
#rideau{overflow:hidden}
.pan{width:50.5%;transition:transform 4.2s cubic-bezier(.42,0,.22,1);will-change:transform;background:repeating-linear-gradient(90deg,#880735 0px,#ca0b4b 16px,#f0246d 30px,#a0073e 46px,#dc1256 62px,#79052c 78px);box-shadow:inset -18px 0 35px rgba(0,0,0,.22),inset 18px 0 35px rgba(0,0,0,.22)}
#rideau.ouvert .pan.g{transform:translateX(-101%)}
#rideau.ouvert .pan.d{transform:translateX(101%)}
#rideau.ouvert .rideau-txt{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.pan{transition-duration:.01ms}}

/* V2 : bandeau véritablement bord à bord (annule les marges des sections) */
#prologue.hero{padding-left:0!important;padding-right:0!important}
#prologue .bandeau-wrap{display:block;width:100vw!important;max-width:100vw!important;margin:0 0 70px calc(50% - 50vw)!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;overflow:hidden}
#prologue .bandeau-wrap img{display:block;width:100%;height:auto;max-width:none}
#prologue .accroche,#prologue .lead,#prologue .reveal:not(.accroche):not(.lead),#prologue .applause{margin-left:auto;margin-right:auto}
/* Arrondis réduits : rectangles légèrement adoucis, sauf éléments ronds voulus */
.btn{border-radius:7px}
.nav nav a{border-radius:4px}
.affiche{border-radius:4px}
.billet{border-radius:4px}
.face{border-radius:5px}
.pellicule figure{border-radius:2px}
.video{border-radius:4px}
.rs a{border-radius:5px}
input,textarea{border-radius:4px}
#bulle{border-radius:8px 8px 0 8px}

/* V3 : ouverture visible sur mobile, même avec les préférences système
   de réduction des mouvements ; seuls les rideaux sont animés ici. */
#rideau{isolation:isolate;background:transparent;visibility:visible}
#rideau .pan{z-index:1;transition-property:transform!important;transition-duration:4.2s!important;transition-timing-function:cubic-bezier(.52,.02,.25,1)!important;transition-delay:0s!important;backface-visibility:hidden}
#rideau .rideau-txt{z-index:2;transition:opacity .5s ease!important}
#rideau.ouvert .pan.g{transform:translate3d(-101%,0,0)!important}
#rideau.ouvert .pan.d{transform:translate3d(101%,0,0)!important}
#rideau.fini{display:none}
/* Boutons d'accueil supprimés ; respiration du contenu préservée. */
#prologue .lead{margin-bottom:60px}

/* Contenus administrables : affiches, portraits et photos */
.affiche .visuel img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.affiche .visuel:has(img)::after{display:none}
.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pellicule figure img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pellicule figure:has(img) figcaption{background:#140d12bb;padding:3px 8px}
#form-status{font-size:.95rem;font-weight:700}


/* --- FUSION BILLETSCENE : Acte I, 3 colonnes maximum --- */
#spectacles .affiches {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch;max-width:1450px;margin:30px auto 0;}
#spectacles .affiches.single {grid-template-columns:minmax(0,460px);}
#spectacles .bs-carte {display:flex;flex-direction:column;min-width:0;border-radius:7px;transform:none!important;overflow:hidden;}
#spectacles .bs-carte:hover {transform:translateY(-4px)!important;}
#spectacles .bs-visuel {height:auto;aspect-ratio:3/4;max-height:430px;min-height:0;padding:15px;background:#faf4ed;display:flex;align-items:center;justify-content:center;}
#spectacles .bs-visuel img {width:100%;height:100%;object-fit:contain;display:block;cursor:default;}
#spectacles .bs-visuel::after {display:none;}
#spectacles .bs-txt {padding:19px;display:flex;flex-direction:column;gap:13px;flex:1;}
#spectacles .bs-txt h3 {margin:0;font-size:1.38rem;line-height:1.2;}
#spectacles .bs-txt .bs-resume {margin:0;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;}
#spectacles .bs-seances {margin-top:auto;display:grid;gap:12px;padding-top:10px;}
#spectacles .bs-mini-billet {border:1px solid #e4cbd2;border-left:5px solid var(--rose);border-radius:5px;background:#fff9f7;overflow:hidden;}
#spectacles .bs-mini-details {padding:12px;display:grid;gap:5px;font-size:.91rem;line-height:1.38;}
#spectacles .bs-mini-details span {display:block;overflow-wrap:anywhere;}
#spectacles .bs-mini-prix {font-weight:700;color:var(--rose);}
#spectacles .bs-reserver {display:block;margin:0 10px 10px;padding:10px;text-align:center;text-decoration:none;}
#spectacles .bs-chargement {grid-column:1/-1;text-align:center;}
@media(max-width:1050px){#spectacles .affiches{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px){#spectacles .affiches,#spectacles .affiches.single{grid-template-columns:minmax(0,1fr);}}

/* BilletScène : horaires et salle alignés, billet découpé et désactivation. */
#spectacles .bs-mini-details{gap:9px}
#spectacles .bs-ligne-pratique{display:flex;gap:7px 18px;flex-wrap:wrap;align-items:baseline;min-width:0}
#spectacles .bs-ligne-pratique span{display:inline;overflow-wrap:anywhere}
#spectacles .bs-mini-prix{font-weight:750;color:var(--rose)}
#spectacles .bs-bouton-billet{
  --ticket-bg:var(--rose);
  display:flex;align-items:center;justify-content:center;min-height:46px;
  margin:1px 9px 11px;padding:10px 16px;
  background:var(--ticket-bg);color:#fff;text-align:center;
  text-decoration:none;font-weight:800;line-height:1.25;
  border:0;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% 35%,calc(100% - 7px) 50%,100% 65%,100% 100%,0 100%,0 65%,7px 50%,0 35%);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.14));
}
#spectacles a.bs-bouton-billet:hover{--ticket-bg:#a80846;transform:translateY(-1px)}
#spectacles a.bs-bouton-billet:focus-visible{outline:3px solid #111;outline-offset:3px}
#spectacles .bs-bouton-ferme{--ticket-bg:#d8d1d4;color:#514750;cursor:not-allowed;user-select:none}

/* Mise en page des préannonces : identique aux spectacles BilletScène. */
#spectacles .preannonce .bs-bouton-ferme {margin-top:0}
#retour-haut{position:fixed;right:20px;bottom:110px;z-index:75;width:46px;height:46px;border:2px solid var(--noir);border-radius:50%;background:var(--rose);color:#fff;box-shadow:0 4px 12px #0003;font:bold 1.6rem sans-serif;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .2s,transform .2s}
#retour-haut.visible{opacity:1;pointer-events:auto;transform:none}
#retour-haut:focus-visible{outline:3px solid var(--noir);outline-offset:3px}
.form-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Mise en forme de l'éditeur visuel */
.rich-content{overflow-wrap:anywhere;white-space:normal}.rich-content p,.rich-content div{margin:0 0 .65em}.rich-content p:last-child,.rich-content div:last-child{margin-bottom:0}.rich-content ul,.rich-content ol{margin:.5em 0 .8em;padding-left:1.5em}.rich-content blockquote{border-left:3px solid currentColor;padding-left:1em;margin:.7em 0}.rich-content a{color:inherit;text-decoration:underline}.rich-content h3,.rich-content h4{margin:.5em 0;font-weight:800}.rich-content [style*="text-align:center"]{text-align:center}
.bs-resume.rich-content{white-space:normal!important}.face.ar .rich-content{font-size:inherit}
.reveal.lead.rich-content.vu {
    padding: 30px 15vw;
}

/* Barre de navigation : hauteur fixe */
.nav {
  height: 76px;
  max-height: none;
  box-sizing: border-box;
  overflow: visible;
}

/* Le logo peut dépasser de la barre */
.brand img {
  flex-shrink: 0;
}

/* ===== Extensions 2026 : légers éléments flottants sur l'ensemble du site ===== */
.bulles{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.bulles i{opacity:.23;filter:drop-shadow(0 1px 2px #0002)}
/* Les clics sur le site passent au travers des décorations. */
.photo-ouvrir{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:zoom-in}
.photo-ouvrir img{width:100%;height:100%;object-fit:cover;display:block}
.photo-dialog{position:fixed;inset:0;margin:auto;width:min(95vw,1050px);max-width:95vw;max-height:95vh;border:0;border-radius:12px;padding:0;background:#160d14;color:#fff;box-shadow:0 15px 60px #0009}
.photo-dialog::backdrop{background:#000c}
.photo-dialog-contenu{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px 52px 18px;min-height:240px}
.photo-dialog img{display:block;max-width:100%;max-height:calc(95vh - 110px);object-fit:contain}
.photo-dialog button{position:absolute;border:0;background:#ffffffd9;color:#17101a;cursor:pointer;font-size:2rem;line-height:1;min-width:42px;min-height:42px;border-radius:50%}
.photo-fermer{right:8px;top:7px}.photo-precedente{left:5px;top:50%}.photo-suivante{right:5px;top:50%}
.photo-legende{font-size:.9rem;text-align:center;padding-top:10px}
.actualites-grille{display:grid;    grid-template-columns: repeat(3, minmax(0, 1fr));gap:26px;margin-top:35px}
.actualite-carte{background:white;color:#17101a;padding:24px;border-radius:14px;box-shadow:0 8px 22px #0002;overflow:hidden}
.actualite-carte h3{font:900 1.5rem 'Fraunces',serif;margin:8px 0 15px}
.actualite-carte time{font-size:.8rem;font-weight:700;color:var(--rose)}
.actualite-image{width:100%;max-height:270px;object-fit:contain;background:#f5edf0;border-radius:9px;margin-bottom:12px}
.actualite-carte .rich-content{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.bulles{display:none}}
section#troupe {
    margin-bottom: 30px;
}
.reveal.vu {
    opacity: 1;
    transform: none;
    margin-bottom: 20px;
}
#liste-spectacles {
    margin-top: 55px !important;
}
section#spectacles {
    background: #e0115f0f;
}
section#spectacles h2 {
    color: #17101a;
}
section#actualites {
    background: #e0115f0f;
}
#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;
    display: none !important;
}
.rideau-txt img {
    width: 380px;
}
.rideau-txt img {
    animation: zoom 1.4s ease-in-out infinite;
}

@keyframes zoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

.pan {
    width: 50.5%;
    transition: transform 4.2s cubic-bezier(.42, 0, .22, 1);
    will-change: transform;

    background: repeating-linear-gradient(
        90deg,
        #39000f 0px,
        #69051f 10px,
        #980d32 20px,
        #b51b42 30px,
        #790722 43px,
        #460014 55px,
        #870a2b 65px,
        #a91439 72px,
        #530018 78px
    );

    box-shadow:
        inset -18px 0 35px rgba(0, 0, 0, .22),
        inset 18px 0 35px rgba(0, 0, 0, .22);
}
.affiche:hover .visuel span {
    animation: zoomRotation 1.4s ease-in-out infinite;
}

@keyframes zoomRotation {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(0deg) scale(1.3);
    }
}
.affiche.bs-carte.preannonce h3 {
    margin-bottom: 15px !important;
}
.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;
    /* margin-top: 10px; */
    margin: auto;
}


#liste-troupe .carte .face.ar > .role {
  display: none !important;
}


/* Cartes de la troupe : format portrait */
@media (min-width: 1000px) {
  #liste-troupe {
    grid-template-columns: repeat(3, minmax(0,410px)) !important;
    justify-content: center !important;
    gap: 190px !important;
  }

  #liste-troupe .carte {
    width: 100% !important;
    height: 430px !important;
    min-height: 490px !important;
  }

  #liste-troupe .carte .in {
    height: 100% !important;
  }
}

/* Même hauteur pour les deux faces */
#liste-troupe .carte .face.av,
#liste-troupe .carte .face.ar {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}
section#prologue h1 {
    margin-bottom: 50px !important;
}
.actualites-carrousel .actualite-carte {
    box-sizing: border-box;
    flex: 0 0 calc((90% - 48px) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

/* Spectacles : fiche plus imposante sur ordinateur */
@media (min-width: 851px) {

  #spectacles .spectacles-liste {
    max-width: 1500px !important;
    width: 95% !important;
  }

  #spectacles .spectacles-liste .bs-carte {
    grid-template-columns: minmax(260px, 32%) minmax(0, 1fr) !important;
    column-gap: 30px !important;
  }

  #spectacles .spectacles-liste .bs-txt {
    padding: 28px 30px 28px 0 !important;
  }

  #spectacles .spectacles-liste .bs-txt h3 {
    font-size: 1.8rem !important;
  }

  #spectacles .spectacles-liste .bs-resume {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
  }
}

/* Spectacles : présentation plus grande et aérée */
@media (min-width: 851px) {

  #spectacles .spectacles-liste {
    width: 100% !important;
    max-width: 1650px !important;
  }

  #spectacles .spectacles-liste .bs-carte {
    width: 100% !important;
    min-height: 580px !important;
    grid-template-columns: minmax(350px, 34%) minmax(0, 1fr) !important;
    column-gap: 45px !important;
    align-items: stretch !important;
  }

  #spectacles .spectacles-liste .bs-visuel {
    min-height: 580px !important;
  }

  #spectacles .spectacles-liste .bs-affiche-ouvrir {
    inset: 24px 0 24px 24px !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 48px) !important;
  }

  #spectacles .spectacles-liste .bs-txt {
    padding: 42px 40px 42px 0 !important;
    gap: 20px !important;
    justify-content: center;
  }

  #spectacles .spectacles-liste .bs-txt h3 {
    font-size: 2rem !important;
    line-height: 1.3 !important;
  }

  #spectacles .spectacles-liste .bs-resume {
    font-size: 1.13rem !important;
    line-height: 1.8 !important;
  }

  #spectacles .spectacles-liste .bs-seances {
    margin-top: 18px !important;
  }
}
#spectacles .spectacles-liste .bs-seances {
    margin-top: 50px !important;
    padding-top: 0 !important;
    gap: 8px !important;
}
#contact .reveal.lead.rich-content.vu {
    /* display: none; */
    margin-top: -40px;
}
form#form {
    margin-top: -100px;
}
.rs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 70px;
}