/* Page Galerie : en-tête, bandeau défilant, filtres, mosaïque animée et visionneuse. S'appuie sur base.css, legal.css et seo.css. */
.album{padding:0 0 clamp(56px,8vw,110px);overflow-x:clip}

/* ——— En-tête ——— */
.album-hero{position:relative;padding:clamp(34px,6vw,80px) 0 clamp(30px,5vw,60px)}
.album-hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.album-hero .ariane{margin-bottom:14px}
.album-hero__sur{font-family:var(--script);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--fraise);display:inline-block;transform:rotate(-3deg);transform-origin:left}
.album-hero h1{font-size:clamp(3rem,8.4vw,6.4rem);margin:.04em 0 .28em}
.album-hero h1 em{font-style:normal;position:relative;white-space:nowrap;color:var(--fraise)}
.album-hero h1 em svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible}
.album-hero h1 em path{fill:none;stroke:var(--encre);stroke-width:5;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:trace 1.1s .5s cubic-bezier(.6,0,.3,1) forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.album-hero__chapeau{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;max-width:46ch;margin:0 0 26px;color:#3b3632}
.album-hero__actions{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.album-hero__chiffres{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0;padding:0;list-style:none}
.album-hero__chiffres li{background:#fff;border:2.5px solid var(--encre);border-radius:999px;padding:6px 14px;font-weight:800;font-size:.9rem;box-shadow:3px 3px 0 var(--encre)}
.album-hero__chiffres b{font-family:var(--display);font-weight:900;color:var(--fraise);margin-right:4px}

/* Collage de trois polaroids qui « tombent » sur la table */
.collage{position:relative;height:clamp(400px,44vw,540px);isolation:isolate}
.collage figure{position:absolute;margin:0;width:48%;background:#fff;padding:10px 10px 46px;border:3px solid var(--encre);border-radius:6px;box-shadow:7px 7px 0 var(--encre);opacity:0;animation:tombe .9s var(--ressort) forwards}
.collage figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:2px solid var(--encre);border-radius:3px;background:var(--pate)}
.collage figcaption{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--script);font-weight:700;font-size:1.55rem}
.collage figure::before{content:"";position:absolute;top:-16px;left:50%;width:92px;height:30px;margin-left:-46px;background:#E8C99C;opacity:.92;border:2px solid var(--encre);transform:rotate(-5deg);z-index:2}
.collage figure:nth-child(1){left:0;top:12%;--r:-8deg;animation-delay:.15s}
.collage figure:nth-child(2){left:50%;top:0;--r:6deg;animation-delay:.32s;z-index:2}
.collage figure:nth-child(3){left:24%;bottom:0;--r:-2deg;animation-delay:.5s;z-index:3;width:44%}
@keyframes tombe{0%{opacity:0;transform:translateY(-60px) rotate(calc(var(--r) * -2)) scale(1.08)}100%{opacity:1;transform:rotate(var(--r))}}
.collage__pastille{position:absolute;right:0;bottom:6%;z-index:4;width:118px;height:118px;border-radius:50%;background:var(--fraise);color:#fff;border:3px solid var(--encre);box-shadow:4px 4px 0 var(--encre);display:grid;place-content:center;text-align:center;transform:rotate(12deg);animation:tourne 14s linear infinite}
.collage__pastille b{display:block;font:900 2.1rem/1 var(--display)}
.collage__pastille span{display:block;font:700 1.15rem/1 var(--script)}
@keyframes tourne{to{transform:rotate(372deg)}}

/* ——— Bandeau défilant ——— */
.defile{background:var(--encre);color:var(--papier);border-block:3px solid var(--encre);transform:rotate(-1.4deg);margin:10px -20px clamp(36px,5vw,60px);overflow:hidden;white-space:nowrap}
.defile__piste{display:inline-flex;animation:defile 26s linear infinite;padding:14px 0}
.defile span{font:900 clamp(1.3rem,2.6vw,2rem)/1 var(--display);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;padding:0 18px;display:inline-flex;align-items:center;gap:36px}
.defile span::after{content:"✦";color:var(--dore-clair);font-size:.8em}
.defile span:nth-child(4n+2){color:var(--dore-clair)}
@keyframes defile{to{transform:translateX(-50%)}}

/* ——— Filtres ——— */
.filtres{position:sticky;top:62px;z-index:15;background:rgba(250,247,241,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:12px 0;margin:0 0 26px}
.filtres .wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filtres__titre{font-family:var(--script);font-weight:700;font-size:1.5rem;margin-right:6px}
.filtre{font:800 .95rem/1 var(--texte);color:var(--encre);background:#fff;border:2.5px solid var(--encre);border-radius:999px;padding:.62em 1em;cursor:pointer;box-shadow:3px 3px 0 var(--encre);transition:transform .25s var(--ressort),box-shadow .25s,background .2s,color .2s;display:inline-flex;gap:.45em;align-items:center}
.filtre small{font:700 .72rem/1 var(--texte);background:var(--pate);border:1.5px solid var(--encre);border-radius:999px;padding:.25em .5em}
.filtre:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:5px 5px 0 var(--encre)}
.filtre[aria-pressed="true"]{background:var(--encre);color:var(--papier);box-shadow:3px 3px 0 var(--fraise)}
.filtre[aria-pressed="true"] small{background:var(--fraise);color:#fff;border-color:var(--papier)}

/* ——— Mosaïque ——— */
.mosaique{list-style:none;margin:0;padding:0;columns:3;column-gap:clamp(16px,2.4vw,30px)}
.mosaique li{break-inside:avoid;margin:0 0 clamp(16px,2.4vw,30px);--rot:0deg}
.mosaique li[hidden]{display:none}
.mosaique li:nth-child(4n+1){--rot:-1.2deg}
.mosaique li:nth-child(4n+3){--rot:1deg}
.tuile{position:relative;display:block;border:3px solid var(--encre);border-radius:18px;background:var(--pate);overflow:hidden;box-shadow:6px 6px 0 var(--encre);transform:perspective(900px) rotate(var(--rot)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--ressort),box-shadow .3s;text-decoration:none;color:var(--encre);-webkit-tap-highlight-color:transparent}
.tuile img{width:100%;height:auto;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(1.02)}
.tuile picture{display:block}
.r-916 img{aspect-ratio:9/16}
.r-34 img{aspect-ratio:3/4}
.r-45 img{aspect-ratio:4/5}
.r-11 img{aspect-ratio:1/1}
.tuile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,18,16,.55));opacity:0;transition:opacity .4s;pointer-events:none}
.tuile__etiquette{position:absolute;left:12px;bottom:12px;right:12px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;transform:translateY(130%);transition:transform .45s var(--ressort)}
.tuile__etiquette span{background:var(--papier);border:2.5px solid var(--encre);border-radius:10px;padding:4px 10px;font:700 1.3rem/1.05 var(--script);box-shadow:3px 3px 0 var(--encre);transform:rotate(-2deg)}
.tuile__etiquette i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--fraise);border:2.5px solid var(--encre);display:grid;place-content:center;color:#fff;font:900 1.2rem/1 var(--texte);font-style:normal;box-shadow:2px 2px 0 var(--encre)}
.tuile__cat{position:absolute;top:12px;left:12px;z-index:2;background:var(--encre);color:var(--papier);border-radius:999px;padding:4px 10px;font:800 .72rem/1.2 var(--texte);letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--ressort)}
.tuile:hover,.tuile:focus-visible{box-shadow:11px 11px 0 var(--fraise);transform:perspective(900px) translate(-4px,-4px) rotate(0deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tuile:hover img,.tuile:focus-visible img{transform:scale(1.07)}
.tuile:hover::after,.tuile:focus-visible::after{opacity:1}
.tuile:hover .tuile__etiquette,.tuile:focus-visible .tuile__etiquette{transform:none}
.tuile:hover .tuile__cat,.tuile:focus-visible .tuile__cat{opacity:1;transform:none}

/* Apparition au défilement : uniquement si le script peut la déclencher. */
@media (scripting:enabled){
  .album-anime .mosaique li{opacity:0;transform:translateY(46px) scale(.94);transition:opacity .8s ease,transform .9s var(--ressort);transition-delay:var(--delai,0ms)}
  .album-anime .mosaique li.vu{opacity:1;transform:none}
}
/* Sur écran tactile, l'étiquette reste visible (pas de survol). */
@media (hover:none){
  .tuile__etiquette{transform:none}
  .tuile__etiquette span{font-size:1.1rem}
  .tuile__etiquette i{display:none}
  .tuile::after{opacity:.8}
}

.album .cta{margin-top:clamp(40px,6vw,70px)}
.album .cta h2{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;font-weight:900;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1;letter-spacing:-.02em}
.album__vide{text-align:center;font:700 1.6rem var(--script);color:var(--gris)}

/* ——— Visionneuse ——— */
.visionneuse{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;color:var(--papier);overflow:hidden}
.visionneuse::backdrop{background:rgba(20,18,16,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.visionneuse[open]{display:grid;grid-template-rows:auto 1fr auto;animation:ouvre .35s ease}
@keyframes ouvre{from{opacity:0}}
.visionneuse__haut{display:flex;justify-content:space-between;align-items:center;padding:14px clamp(14px,3vw,28px)}
.visionneuse__compteur{font:900 1.1rem var(--display);letter-spacing:.04em}
.visionneuse__compteur span{color:var(--dore-clair)}
.visionneuse button{font:900 1.5rem/1 var(--texte);width:52px;height:52px;border-radius:50%;border:3px solid var(--papier);background:var(--encre);color:var(--papier);cursor:pointer;display:grid;place-content:center;transition:transform .25s var(--ressort),background .2s}
.visionneuse button:hover{background:var(--fraise);transform:scale(1.08) rotate(-6deg)}
.visionneuse__scene{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(8px,2vw,24px);padding:0 clamp(10px,3vw,28px);min-height:0}
.visionneuse figure{margin:0;height:100%;min-height:0;padding:0 12px 14px 0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:visible}
.visionneuse figure img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;width:auto;height:auto;border:4px solid var(--papier);border-radius:16px;box-shadow:10px 10px 0 var(--fraise);background:#2a2522;transition:opacity .25s,transform .35s var(--ressort)}
.visionneuse figure img.change{opacity:0;transform:scale(.96) rotate(-1deg)}
.visionneuse__legende{margin:0;text-align:center;padding:28px 16px 26px;font:700 clamp(1.5rem,3vw,2rem)/1.1 var(--script)}
.visionneuse__legende small{display:block;font:700 .78rem/1.4 var(--texte);letter-spacing:.08em;text-transform:uppercase;color:var(--dore-clair);margin-top:6px}


@media (max-width:1000px){
  .mosaique{columns:2}
  .album-hero .wrap{grid-template-columns:1fr}
  .collage{max-width:520px;width:100%;margin:10px auto 0;height:clamp(360px,104vw,560px)}
}
@media (max-width:640px){
  .mosaique{column-gap:12px}
  .mosaique li{margin-bottom:12px}
  .tuile{border-width:2.5px;border-radius:13px;box-shadow:4px 4px 0 var(--encre)}
  .tuile__etiquette{left:7px;right:7px;bottom:7px}
  .tuile__etiquette span{font-size:.98rem;padding:3px 7px;border-width:2px}
  .filtres{top:58px;padding:10px 0}
  .filtres .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .filtres .wrap::-webkit-scrollbar{display:none}
  .filtre{flex:none}
  .filtres__titre{display:none}
  .collage__pastille{width:96px;height:96px}
  .collage__pastille b{font-size:1.7rem}
  .visionneuse__scene{grid-template-columns:1fr}
  .visionneuse__prec,.visionneuse__suiv{position:absolute;bottom:-70px;z-index:2}
  .visionneuse__prec{left:16px}
  .visionneuse__suiv{right:16px}
  .visionneuse figure{padding:0 8px 10px 0}
  .visionneuse figure img{box-shadow:6px 6px 0 var(--fraise)}
  .visionneuse__legende{padding:20px 80px 26px}
}
@media (prefers-reduced-motion:reduce){
  .album-anime .mosaique li{opacity:1!important;transform:none!important}
  .collage figure{opacity:1;transform:rotate(var(--r))}
  .album-hero h1 em path{stroke-dashoffset:0}
  .tuile{transform:rotate(var(--rot))!important}
}