/*
Theme Name: La Bankize
Author: Jean-Pierre Lambelet
Author URI: https://jean-pierre.lambelet.net/
Description: Thème de la compagnie d'improvisation La Bankize. Les dates, les spectacles et la troupe se gèrent dans l'admin, les textes dans Apparence > Personnaliser.
Version: 1.0.0
Requires PHP: 8.2
Text Domain: bankize
*/

:root{
  --blue:#1856dc;
  --navy:#0b0f52;
  --purple:#8a2d8e;
  --ice:#f6f3ec;
  --line:rgba(246,243,236,.3);
  --gutter:clamp(16px,4vw,48px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:64px}
body{background:var(--blue);color:var(--ice);font-family:"Archivo",system-ui,sans-serif;font-size:1.05rem;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.display{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:1.02;letter-spacing:-.005em}
.label{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.nav{position:sticky;top:0;z-index:10;background:var(--blue);border-bottom:1px solid var(--line)}
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}
@media (max-width:600px){.admin-bar .nav{top:0}}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:38px;height:36px}
.brand span{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.5rem;letter-spacing:.01em}
.nav nav{display:flex;align-items:center}
.nav ul{display:flex;gap:clamp(12px,2.4vw,32px);list-style:none}
.nav ul a{white-space:nowrap;font-stretch:125%;font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;display:inline-block;padding:12px 0}
.nav ul a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.brand span{white-space:nowrap}
.burger{display:none}
@media (max-width:860px){
  .nav .wrap{flex-wrap:wrap}
  html:not(.js) .nav ul{flex-wrap:wrap;gap:0 18px;padding-bottom:8px}
  html:not(.js) .nav ul a{padding:10px 0}
}
@media (max-width:860px){
  .js .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-right:-10px;padding:10px;background:none;border:0;color:inherit;cursor:pointer}
  .js .burger span{display:block;height:3px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
  .nav.open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0}
  .nav.open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .js .nav ul{display:none;max-height:calc(100dvh - 64px);overflow-y:auto;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--blue);border-bottom:1px solid var(--line);padding:4px var(--gutter) 12px}
  .js .nav.open ul{display:flex}
  .js .nav ul li+li{border-top:1px solid var(--line)}
  .js .nav ul a{display:block;padding:14px 0;font-size:1rem}
}
@media (max-width:340px){.brand span{font-size:1.25rem}}

.hero{padding:clamp(32px,4.5vw,64px) 0 0;overflow:hidden}
.hero h1{font-size:clamp(3rem,21.5vw,14rem);line-height:.9;white-space:nowrap}
.hero .tagline{font-size:clamp(.95rem,2.35vw,1.9rem);margin-top:.5em}
.hero-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:end;gap:clamp(16px,3vw,40px);margin-top:clamp(28px,4vw,48px)}
.hero-troupe{position:relative;justify-self:end;width:min(100%,620px)}
.hero-troupe img{display:block;width:100%;height:auto;max-height:320px;object-fit:contain;object-position:right bottom}
.berg{width:clamp(64px,6vw,84px);height:auto}
.hero-troupe .berg{position:absolute;bottom:calc(100% + 44px);left:calc(50% - clamp(32px,3vw,42px))}
.next{display:block;border:2px solid var(--ice);border-radius:8px;padding:22px 24px;margin-bottom:clamp(40px,5vw,64px);text-decoration:none;color:inherit}
.next:hover{background:rgba(246,243,236,.08)}
.next .label{display:block;font-size:.9rem}
.next .big-date{display:block;font-size:clamp(2.6rem,6vw,4.2rem);margin:.15em 0 .1em}
.next .info{display:block;font-weight:600}
.next .free{display:block;margin-top:10px;font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:.9rem;letter-spacing:.04em}
.next-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;padding:0 18px;border-radius:8px;background:var(--ice);color:var(--blue);font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem}
.next:hover .next-cta{background:#fff}
@media (max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}.next{max-width:520px;margin-bottom:0}.hero-troupe{justify-self:center}.hero-troupe{display:flex;flex-direction:column;align-items:center}.hero-troupe img{object-position:center bottom}.hero-troupe .berg{position:static;order:-1;margin:4px auto 14px}}

.quoi{background:var(--navy);padding:clamp(64px,10vw,140px) 0}
.quoi .lines{font-size:clamp(2.4rem,7.6vw,5.8rem);line-height:1.1;text-wrap:balance}
.quoi .lines span+span{margin-top:.04em}
.quoi .lines span{display:block}
.quoi-corps{display:grid;gap:clamp(32px,5vw,56px);margin-top:clamp(36px,5vw,60px);align-items:start}
@media (min-width:960px){.quoi-corps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.quoi .intro{max-width:60ch;font-size:1.15rem}
.quoi .intro p+p{margin-top:1em}
.quoi .intro strong{font-stretch:125%}

.shows{padding:clamp(64px,10vw,140px) 0}
.section-title{font-size:clamp(3.4rem,11vw,9rem);margin-bottom:clamp(28px,4vw,52px)}
.show-list{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.show{border:2px solid var(--ice);border-radius:8px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:14px}
.show h3{font-size:clamp(2.4rem,4.4vw,3.2rem);overflow-wrap:anywhere}
.show>*{min-width:0}
.desc img,.desc video,.desc iframe{max-width:100%;height:auto}
.desc{overflow-wrap:anywhere}
.desc .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(120px,100%),1fr));gap:6px;margin:12px 0}
.desc .gallery-item{margin:0}
.show .when{font-size:.9rem}
.show .desc{flex:1}
.show .desc p+p{margin-top:.8em}
.show .where{font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:.9rem;letter-spacing:.04em;border-top:1px solid var(--line);padding-top:14px}

.dates{background:var(--purple);padding:clamp(64px,10vw,140px) 0}
.dates .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px)}
.dates .head .section-title{margin:0}
.dates .season{font-size:.45em;vertical-align:.9em}
.toggle{display:inline-flex;align-items:center;gap:10px;font-stretch:125%;font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;min-height:44px}
.toggle input{width:20px;height:20px;accent-color:var(--navy)}
.groups{display:grid;gap:clamp(16px,2.5vw,24px)}
.group{padding:clamp(18px,3vw,32px);border-radius:8px;background:#7a2480}
.group:nth-child(3n+2){background:#9a3a9f}
.group:nth-child(3n){background:#6b1d70}
.group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px 40px}
.group h3{font-size:clamp(2.4rem,5.5vw,4.4rem);overflow-wrap:anywhere}
.group .venue{display:block;font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:800;font-size:.9rem;letter-spacing:.05em;margin-top:12px;line-height:1.3}
.rows{list-style:none;border-top:1px solid rgba(246,243,236,.35)}
.rows > li{position:relative}
.rows > li::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;border-bottom:1px solid rgba(246,243,236,.35)}
.rows > li.is-next::after,.rows > li:has(> a.row:hover)::after{display:none}
.rows .row{color:inherit;text-decoration:none;display:grid;grid-template-columns:4.2em minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:15px 0;font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.rows .d{font-family:"Anton",sans-serif;font-size:1.9rem;font-stretch:normal;letter-spacing:0;line-height:1}
.rows .m{font-size:.95rem}
.rows .m small{display:block;font-weight:600;font-size:.9rem}
.rows .h{font-size:.95rem}
.rows .badge{display:table;margin-top:8px;font-size:.9rem;padding:3px 10px;border-radius:999px;border:1.5px solid currentColor}
.rows > li.past .d,.rows > li.annule .d{text-decoration:line-through;text-decoration-thickness:3px}
.rows > li.is-next{background:var(--ice);color:var(--purple)}
.rows > li.is-next .badge{background:var(--purple);color:var(--ice);border-color:var(--purple)}
#dates:not(:has(#afficher-passees:checked)) :is(.rows > li.past,.group.all-past){display:none}
.rows .lieu{display:block;font-weight:600;font-size:.9rem;text-transform:none;letter-spacing:.02em}
@media (max-width:760px){.group{grid-template-columns:1fr}}

.troupe{background:var(--navy);padding:clamp(64px,10vw,140px) 0}
.troupe .lead{max-width:56ch;font-size:1.1rem;margin-bottom:clamp(28px,4vw,48px)}
.names{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:0 40px}
.names li{overflow-wrap:anywhere;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.05;padding:14px 0;border-bottom:1px solid rgba(246,243,236,.25)}

.contact{padding:clamp(64px,10vw,140px) 0 48px}
.contact .big{font-size:min(8.4rem,calc((min(100vw, 1180px) - 2 * var(--gutter)) / (var(--car, 13) * .515)));white-space:nowrap}
.contact .big a{text-decoration:none}
.contact .big a:hover{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.08em}
.contact .text{max-width:52ch;margin-top:24px;font-size:1.1rem}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:var(--ice);color:var(--blue);text-decoration:none;font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:14px 22px;border-radius:8px;min-height:48px}
.btn:hover{background:#fff}

.site-footer{border-top:1px solid rgba(246,243,236,.25);margin-top:clamp(64px,8vw,110px);padding:22px 0 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.9rem}
.berg-bas{display:block;margin:clamp(48px,7vw,88px) auto 0}
.berg-bas + .site-footer{margin-top:clamp(32px,4vw,56px)}
.site-footer .credit a{font-weight:700;text-underline-offset:3px}

.page-content{padding-top:clamp(48px,8vw,100px);padding-bottom:clamp(48px,8vw,100px);max-width:880px}
.page-content>*{max-width:62ch}
.page-content h1{max-width:none}
.page-content{overflow-wrap:anywhere}
.page-content :is(img,video,iframe,embed,object){max-width:100%;height:auto}
.page-content iframe{aspect-ratio:16/9;height:auto}
.page-content table{display:block;max-width:100%;overflow-x:auto}
.desc iframe{aspect-ratio:16/9}
.page-content h1{font-size:clamp(3rem,9vw,6rem);margin-bottom:.5em}
.page-content p,.page-content ul{margin-bottom:1em}

.rows .badge{white-space:nowrap}
@media (max-width:420px){
}
@media (max-width:340px){
  .rows .row{gap:8px;letter-spacing:.02em}
  .rows .m,.rows .h{font-size:.9rem}
  .rows .d{font-size:1.6rem}
}
@media (max-width:300px){.rows .badge{white-space:normal}.rows .m,.rows .h{font-size:.9rem}}


.photos{padding:clamp(64px,10vw,140px) 0}
.photo-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,45%),1fr));gap:8px}
.photo-grid a{display:block;border-radius:8px;overflow:hidden}
.photo-grid img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .2s}
.photo-grid a:hover img{transform:scale(1.03)}
.lightbox{margin:auto;max-width:min(96vw,1000px);max-height:96dvh;padding:0;border:0;background:transparent;color:var(--ice);overflow:visible}
.lightbox::backdrop{background:rgba(5,8,40,.92)}
.lightbox figure{margin:0;text-align:center}
.lightbox img{display:block;max-width:100%;max-height:84dvh;margin:0 auto;border-radius:8px}
.lightbox figcaption{margin-top:10px;font-size:.95rem}
.lightbox button{position:fixed;width:48px;height:48px;border:0;border-radius:8px;background:var(--ice);color:var(--navy);font-size:2rem;line-height:1;cursor:pointer}
.lb-close{top:12px;right:12px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}

.event-page{padding-top:clamp(32px,6vw,72px);padding-bottom:clamp(32px,6vw,72px);max-width:880px}
.event-page .back a{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem}
.event-page .kicker{margin:28px 0 12px;font-size:.9rem}
.event-page h1{font-size:clamp(3rem,10vw,7rem);overflow-wrap:anywhere}
.event-page .statut{display:inline-block;margin-top:16px;padding:4px 12px;border:2px solid var(--ice);border-radius:999px;font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:.9rem}
.event-page .infos{display:grid;gap:14px;margin:32px 0;padding:22px 24px;border:2px solid var(--ice);border-radius:8px}
.event-page .infos dt{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem}
.event-page .infos dd{margin:2px 0 0;font-size:1.1rem;font-weight:600}
.event-page .desc{font-size:1.15rem;max-width:60ch}
.event-page .desc p+p{margin-top:1em}


.page-content{font-size:1.15rem}
.page-content ul{list-style:none;padding:0;margin:24px 0}
.page-content li{padding:16px 0 16px 34px;border-bottom:1px solid var(--line);position:relative}
.page-content li:first-child{border-top:1px solid var(--line)}
.page-content li::before{content:"";position:absolute;left:4px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--ice)}
.page-content a:not(.btn){font-weight:700;text-underline-offset:3px}
.group-head .first-time{margin-top:8px}
.first-time{display:inline-block;padding:8px 0;font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;line-height:1.5;text-underline-offset:4px}
.page-content h2{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:1.02;font-size:clamp(2rem,6vw,3.2rem);margin:48px 0 8px}

.agenda{position:relative;display:inline-block}
.agenda-bouton{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 20px;border:2px solid var(--ice);border-radius:8px;background:transparent;color:var(--ice);font:inherit;font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;cursor:pointer}
.agenda-bouton:hover{background:var(--ice);color:var(--blue)}
.agenda-menu{display:none;position:fixed;inset:unset;overflow-x:hidden;overflow-y:auto;margin:0;padding:6px 0;min-width:14em;list-style:none;background:var(--ice);color:var(--navy);border:0;border-radius:8px;box-shadow:0 8px 24px rgba(5,8,40,.35)}
.agenda-menu:popover-open{display:block}
.agenda-menu a{display:block;padding:12px 18px;color:var(--navy);text-decoration:none;font-weight:700;white-space:nowrap}
.agenda-menu a:hover,.agenda-menu a:focus-visible{background:rgba(24,86,220,.12)}
.agenda-menu--repli{position:absolute;top:calc(100% + 6px);right:0;left:auto;z-index:20}
.agenda-menu--repli.agenda-menu--ouvert{display:block}
@supports (transition-behavior:allow-discrete){
  .agenda-menu{opacity:0;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,display .15s allow-discrete}
  .agenda-menu:popover-open{opacity:1;transform:none}
  @starting-style{.agenda-menu:popover-open{opacity:0;transform:translateY(-4px)}}
}

.show h3 a,.group h3 a{color:inherit;text-decoration:none}
.group h3 a:hover{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.1em}
.event-page .dates-title{font-size:clamp(2.2rem,7vw,4rem);margin:48px 0 16px}
.event-page .no-dates{font-size:1.1rem}
.dates-list li{scroll-margin-top:80px}
.dates-list li:target:not(.is-next){outline:2px solid var(--ice);outline-offset:4px;border-radius:8px}
.rows > li{display:flex;align-items:center;gap:10px}
.rows > li>.row{flex:1;min-width:0}
.rows > li>.agenda{flex:none}
.agenda-bouton--icone{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border:1.5px solid rgba(246,243,236,.4)}
.agenda-bouton--icone:hover,.agenda-bouton--icone:focus-visible{border-color:var(--ice)}
.rows > li.is-next .agenda-bouton{border-color:rgba(138,45,142,.4);color:var(--purple)}
.rows > li.is-next .agenda-bouton:hover{background:var(--purple);color:var(--ice)}

/* Ligne de date : tout sur une ligne, centré */
.rows .row{grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:center;gap:0 16px}
.rows .d{font-size:1.9rem;line-height:1}
.rows .m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0}
.rows .m small{display:inline;font-size:.9rem}
.rows .badge{display:inline-block;margin-top:0}
.rows .lieu{flex-basis:100%}
.jour-court{display:none}
.rows{container:dates/inline-size}
@container dates (max-width:480px){
  .jour-long{display:none}
  .jour-court{display:inline}
  .rows .row{gap:0 10px}
}
@container dates (max-width:420px){
  .rows > li.is-next .badge{display:none}
}
@container dates (max-width:360px){
  .rows .row{font-stretch:100%}
  .rows .row,.rows .m small,.rows .badge{letter-spacing:0}
  .rows .row{grid-template-columns:2.1rem minmax(0,1fr) auto;gap:0 8px;letter-spacing:.02em}
  .rows .d{font-size:1.55rem}
  .rows .m{gap:2px 8px}
  .rows .m,.rows .h{font-size:.9rem}
  .rows .m small{font-size:.9rem}
  .rows > li{gap:8px}
}

/* Survols */
a{text-decoration-color:color-mix(in srgb,currentColor 55%,transparent);transition:text-decoration-color .15s,text-decoration-thickness .15s}
a:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ice);outline-offset:2px;box-shadow:0 0 0 7px var(--navy)}
.brand:hover span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.toggle:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.burger{border-radius:8px;transition:background-color .15s}
.burger:hover{background:rgba(246,243,236,.14)}
.lightbox button{transition:background-color .15s,box-shadow .15s}
.lightbox button:hover{background:#fff;box-shadow:0 0 0 3px rgba(246,243,236,.45)}
@media (max-width:360px){.group{padding:16px 10px}}
@container dates (max-width:280px){
  .rows .row{grid-template-columns:1.85rem minmax(0,1fr) auto;gap:0 6px;letter-spacing:0}
  .rows .d{font-size:1.45rem}
  .rows > li{gap:6px}
}

/* Lignes de date : fond au survol, ligne entière cliquable */
.rows > li{--pad:12px;margin:0 calc(var(--pad) * -1);padding:0 var(--pad);border-radius:8px;transition:background-color .15s}
.rows > li:has(> a.row:hover){background:rgba(246,243,236,.12)}
.rows > li.is-next:has(> a.row:hover){background:#fff}
@media (max-width:420px){.rows > li{--pad:8px}}
@media (max-width:360px){.rows > li{--pad:6px}}

/* Cartes de spectacle : toute la carte mène à la page du spectacle */
.show{position:relative;transition:background-color .15s}
.show h3 a::after{content:"";position:absolute;inset:0;border-radius:8px}
.show:hover{background:rgba(246,243,236,.1)}
.show .first-time,.show .desc :is(a,button,iframe,video,audio,input,select,textarea){position:relative;z-index:1}

/* Déjà vu sur scène : une vraie scène à la fois */
.deja-vu{display:flex;flex-direction:column;align-items:flex-start;background:var(--ice);color:var(--navy);border-radius:8px;padding:clamp(22px,3vw,32px)}
.deja-vu-titre{font-size:clamp(2rem,5vw,3rem)}
.deja-vu-texte{margin:10px 0 0}
.deja-vu-scene{margin:0;padding:20px 0;font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.08;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.deja-vu-scene span::before{content:"«\00a0"}
.deja-vu-scene span::after{content:"\00a0»"}
.deja-vu .btn{margin-top:0;border:0;cursor:pointer;background:var(--navy);color:var(--ice)}
.deja-vu .btn:hover{background:var(--purple)}
.change .deja-vu-scene{animation:apparait .35s ease-out both}
@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Mouvement : l'iceberg flotte, les photos posées en vrac */
.berg{animation:flotte 6s ease-in-out infinite;transition:rotate .3s}
.berg:hover{rotate:-5deg}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -10px}}
.photo-grid{gap:14px}
.photo-grid a{background:var(--ice);padding:6px;border-radius:6px;box-shadow:0 6px 18px rgba(5,8,40,.35);transition:rotate .25s,scale .25s}
.photo-grid img{border-radius:3px}
.photo-grid li:nth-child(4n+1) a{rotate:-2deg}
.photo-grid li:nth-child(4n+2) a{rotate:1.5deg}
.photo-grid li:nth-child(4n+3) a{rotate:-1deg}
.photo-grid li:nth-child(4n) a{rotate:2deg}
.photo-grid a:hover,.photo-grid a:focus-visible{rotate:0deg;scale:1.03}
.photo-grid a:hover img{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .berg,.change .deja-vu-scene{animation:none}
  .berg,.photo-grid a,.photo-grid img{transition:none}
}
html:not(.js) .deja-vu-bouton{display:none}

/* Éclats de glace qui dérivent dans chaque bande de couleur */
.hero,.quoi,.shows,.dates,.troupe,.photos,.contact{position:relative}
:is(.hero,.quoi,.shows,.dates,.troupe,.photos,.contact)>.wrap{position:relative;z-index:1}
.eclats{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.eclat{--taille:var(--s);--tx:var(--dx);--ty:var(--dy);--marge:calc(var(--taille) * .2 + 50px);position:absolute;left:clamp(var(--marge),var(--x),calc(100% - var(--taille) - var(--marge)));top:var(--y);width:var(--taille);height:var(--taille);color:var(--ice);opacity:var(--o);rotate:var(--r);animation:derive var(--d) ease-in-out var(--delay) infinite alternate}
@keyframes derive{to{translate:var(--tx) var(--ty);rotate:calc(var(--r) + 45deg)}}
.eclat-plus{display:none}
@media (max-width:640px){.eclat{--taille:calc(var(--s) * .7);--tx:calc(var(--dx) * .3);--ty:calc(var(--dy) * .5);--marge:calc(var(--taille) * .2 + 16px);animation-duration:calc(5s + (var(--d) - 9s) * .25)}.eclat-plus{display:block}.eclat-dedans{left:max(0px,min(clamp(var(--marge),var(--x),calc(100% - var(--taille) - var(--marge))),calc(50% - 42px - var(--taille) * 1.2 - 20px)))}}
@media (prefers-reduced-motion:reduce){.eclat{animation:none}}