/* =========================================================
   MOSAÏQUE « SAVE THE DATE » — STYLES PARTAGÉS
   Utilisés à la fois par save-the-date.php et par l'outil
   mosaique-admin.php : l'outil est ainsi une reproduction exacte
   de la page. Ne pas modifier l'un sans l'autre.
   ========================================================= */

/* MOSAÏQUE : photos et vidéos entremêlées (colonnes façon magazine) */
.mosaique{max-width:1160px;margin:0 auto;
  columns:4;column-gap:clamp(10px,1.4vw,16px)}
@media(max-width:1040px){.mosaique{columns:3}}
@media(max-width:700px){.mosaique{columns:2}}
@media(max-width:430px){.mosaique{columns:1;max-width:360px}}

/* placement en ordre de lecture (activé par le script) :
   chaque élément va dans la colonne la moins haute */
.mosaique.place{columns:auto;position:relative}
.mosaique.place .tuile{position:absolute;margin:0}
.mosaique.place .tuile--photo img{height:100%;object-fit:cover}

.tuile{break-inside:avoid;margin:0 0 clamp(10px,1.4vw,16px);
  position:relative;border-radius:6px;overflow:hidden;
  border:1px solid var(--beige-fonce);background:var(--vert-pale);
  box-shadow:0 8px 22px rgba(63,74,65,.07);
  opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease,box-shadow .4s ease}
.tuile.visible{opacity:1;transform:none}

/* tuile photo */
.tuile--photo{cursor:zoom-in}
.tuile--photo img{width:100%;height:auto;display:block;
  transition:transform .7s ease}
.tuile--photo:hover img{transform:scale(1.05)}
.tuile--photo:hover{box-shadow:0 14px 32px rgba(63,74,65,.16)}
.tuile--photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(96,110,98,.22),transparent 42%);
  opacity:0;transition:opacity .4s ease}
.tuile--photo:hover::after{opacity:1}

/* tuile vidéo (format vertical 9:16 par défaut) */
.tuile--video{aspect-ratio:9/16}
.tuile--video-large{aspect-ratio:16/9}  /* vidéo paysage */
.tuile--video iframe{width:100%;height:100%;border:0;display:block}

/* vignette : rien n'est demandé à YouTube tant qu'on n'a pas cliqué */
.film__afiche{position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;cursor:pointer;border:0;padding:1.5rem;
  background:linear-gradient(160deg,var(--vert-pale),var(--beige) 120%);
  transition:background .4s ease}
.film__afiche:hover{background:linear-gradient(160deg,var(--beige),var(--vert-pale) 120%)}
.film__rond{width:clamp(54px,calc(var(--ecran,100vw) * .13),68px);height:clamp(54px,calc(var(--ecran,100vw) * .13),68px);
  border-radius:50%;background:var(--vert-fonce);
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s ease,background .4s ease}
.film__afiche:hover .film__rond{transform:scale(1.08);background:var(--vert-profond)}
.film__rond svg{width:38%;height:38%;margin-left:12%;fill:var(--beige-clair)}

/* couverture choisie dans l'outil : photo sous le bouton, léger voile */
.film__afiche--couv{overflow:hidden;background:var(--vert-fonce)}
.film__afiche--couv:hover{background:var(--vert-fonce)}
.film__couv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s ease}
.film__afiche--couv::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(63,74,65,.45),rgba(63,74,65,.12) 55%,rgba(63,74,65,.18));
  transition:background .4s ease}
.film__afiche--couv:hover .film__couv{transform:scale(1.05)}
.film__afiche--couv:hover::after{background:linear-gradient(to top,rgba(63,74,65,.55),rgba(63,74,65,.2) 55%,rgba(63,74,65,.25))}
.film__afiche--couv .film__rond,.film__afiche--couv .film__mot{position:relative;z-index:1}
.film__afiche--couv .film__rond{background:rgba(248,247,239,.92);box-shadow:0 6px 18px rgba(63,74,65,.3)}
.film__afiche--couv .film__rond svg{fill:var(--vert-fonce)}
.film__afiche--couv:hover .film__rond{background:var(--beige-clair)}
.film__afiche--couv .film__mot{color:var(--beige-clair);opacity:1;text-shadow:0 1px 6px rgba(63,74,65,.6)}
.film__mot{font-family:'Noto Serif Display',serif;letter-spacing:.18em;
  text-transform:uppercase;font-size:.6rem;color:var(--encre);opacity:.75}