/* Effets « waouh » (voir js/waouh.js). Rien ici ne change la mise en page : seulement du mouvement et de la lumière. */

/* Teaser vidéo dans le carrousel */
.diapo .teaser{position:absolute;left:50%;top:50%;width:max(100%,calc(100vh * 1.78 * .82));height:max(100%,calc(100vw * .5625));transform:translate(-50%,-50%) scale(1.04);border:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease;z-index:1}
.diapo .teaser.vue{opacity:1}
.son-teaser{position:absolute;z-index:5;right:calc(var(--gr, 24px) + 8px);top:clamp(150px,20vh,190px);display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(6,21,15,.45);backdrop-filter:blur(10px);color:#fff;font:700 14px/1 var(--corps);cursor:pointer;transition:background .25s,opacity .4s}
.son-teaser:hover{background:rgba(6,21,15,.75)}
.son-teaser[hidden]{display:none}
.ecran.en-video .ecran-sala{opacity:.05}

.ecran #diapos{position:absolute;inset:0}

/* Cartes en relief */
.relief{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;will-change:transform}
.relief.relief-on{transition:transform .12s linear,box-shadow .5s;box-shadow:0 30px 60px -28px rgba(6,21,15,.65)}
.fiche-affiche.relief{border-radius:14px}

/* Boutons aimantés */
.btn-vert,.btn-blanc{transition:translate .25s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .2s,transform .2s}


/* Compte à rebours sur la prochaine date */
.compte{position:absolute;top:16px;right:16px;z-index:2;display:flex;gap:6px}
.compte-bloc{display:flex;flex-direction:column;align-items:center;min-width:54px;padding:8px 6px 7px;border-radius:10px;background:rgba(6,21,15,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16)}
.compte-bloc b{font:800 22px/1 var(--titres);font-variant-numeric:tabular-nums;color:#fff;display:block}
.compte-bloc b.bascule{animation:bascule .45s cubic-bezier(.2,.8,.2,1)}
.compte-bloc small{font:700 10px/1 var(--corps);letter-spacing:.08em;text-transform:uppercase;color:var(--menthe,#9FE3CF);margin-top:5px}
@keyframes bascule{from{transform:translateY(-45%) rotateX(70deg);opacity:0}to{transform:none;opacity:1}}
@media (max-width:560px){.compte{top:64px;left:18px;right:auto}.compte-bloc{min-width:44px;padding:6px 4px}.compte-bloc b{font-size:17px}.dates .vedette:has(.compte){aspect-ratio:auto !important;min-height:340px}}

/* Titres qui montent mot à mot */
.titre-r .mot-r{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.titre-r .mot-r > span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.titre-r.titre-vu .mot-r > span{transform:none}

/* Grain de pellicule très léger sur les fonds sombres */
.scene{position:relative}
.ecran::before,.ouverture::after,.livre-bande::before,.pied::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.07;background-image:url(../img/grain.png);mix-blend-mode:overlay}
.ecran::before{animation:grain 1.2s steps(6) infinite;will-change:background-position}
/* téléphones : grain fixe, pas de flou (trop coûteux pour leur processeur) */
@media (max-width:760px),(pointer:coarse){.ecran::before{animation:none}.btn-verre,.rond,.son-teaser,.compte-bloc,.pros-carte,.entete.plein .entete-bas{backdrop-filter:none;-webkit-backdrop-filter:none}.btn-verre{background:rgba(6,21,15,.5)}.pros-carte{background:rgba(10,32,24,.88)}}
@keyframes grain{0%{background-position:0 0}20%{background-position:-40px 30px}40%{background-position:30px -50px}60%{background-position:-60px -20px}80%{background-position:50px 40px}100%{background-position:0 0}}

@media (prefers-reduced-motion: reduce){.relief,.titre-r .mot-r > span{transform:none !important;transition:none !important}.ecran::before{animation:none}}
.vid.relief,.billet.relief,.vedette.relief{position:relative}
.vid.relief .vid-img{display:block}
.carte.relief{animation-fill-mode:backwards}

/* Pointeur : la salamandre du logo (ordinateurs seulement) */
@media (hover: hover) and (pointer: fine){
  html{cursor:url(../img/curseur.png) 8 0,auto;cursor:-webkit-image-set(url(../img/curseur.png) 1x,url(../img/curseur@2x.png) 2x) 8 0,auto;cursor:image-set(url(../img/curseur.png) 1x,url(../img/curseur@2x.png) 2x) 8 0,auto}
  a,button,summary,label,select,[role=button],.jr-tuile,.carte,.billet,.vid,.affichette{cursor:url(../img/curseur-lien.png) 8 0,pointer;cursor:-webkit-image-set(url(../img/curseur-lien.png) 1x,url(../img/curseur-lien@2x.png) 2x) 8 0,pointer;cursor:image-set(url(../img/curseur-lien.png) 1x,url(../img/curseur-lien@2x.png) 2x) 8 0,pointer}
  input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea{cursor:text}
}
/* 29/10 : survol du catalogue : la case se soulève, un reflet suit la souris, l'image avance un peu */
.carte.relief-on{box-shadow:0 34px 60px -26px rgba(6,21,15,.7)}
.carte.relief-on::after{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),rgba(255,255,255,0) 45%),linear-gradient(0deg,rgba(6,21,15,.9) 0%,rgba(6,21,15,.2) 45%,rgba(6,21,15,0) 70%)}
.carte img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.carte.relief-on img{transform:scale(1.06)}

/* bouton du son + réglette de volume */
.son-zone{position:absolute;z-index:5;right:calc(var(--gr, 24px) + 8px);top:clamp(150px,20vh,190px);display:flex;align-items:center;gap:10px;padding:0;border-radius:999px;transition:background .25s,padding .25s}
.son-zone[hidden]{display:none}
.son-zone .son-teaser{position:static}
.son-zone.son-on{padding:0 16px 0 0;background:rgba(6,21,15,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.son-vol{-webkit-appearance:none;appearance:none;width:120px;height:5px;border-radius:9px;background:linear-gradient(90deg,#1BC49A var(--v,70%),rgba(255,255,255,.3) var(--v,70%));cursor:pointer;outline-offset:6px}
.son-vol[hidden]{display:none}
.son-vol::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.son-vol::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}