/* ==========================================================================
   Kamai Event — Section « Cadres sur mesure » (#cadres).
   Galerie de cadres personnalisés réellement réalisés (mariages, anniversaires,
   soirées, associations…). Grille de vignettes 3:2 montées en « cartes »
   (liseré doré + ombre douce, léger soulèvement au survol).
   Placée après #etapes (l'étape 03 « On crée votre cadre sur mesure » la prépare).
   Dépend de css/tokens.css.
   ========================================================================== */
.cadres{
  background:var(--beige); padding:7rem 1.8rem;   /* beige (pas ivoire) : les cadres clairs/vides ressortent comme des cartes au lieu de se fondre */
  border-top:1px solid rgba(197,165,114,.18);
}
.cadres__inner{ max-width:1100px; margin:0 auto; }

/* ---- En-tête ---- */
.cadres__head{ max-width:640px; margin:0 auto 4rem; text-align:center; }
.cadres .eyebrow{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:1.1rem;
}
.cadres h2{
  font-family:var(--serif); font-weight:500; line-height:1.06;
  font-size:clamp(2rem,4vw,3rem); color:var(--ink); margin:0 0 1rem;
}
.cadres .lead{ color:var(--ink-soft); font-size:1.02rem; line-height:1.7; }

/* ---- Bande défilante (une seule ligne, défilement continu) — même principe que la galerie ---- */
.cadres__marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.cadres__track{
  list-style:none; margin:0; padding:0;
  display:flex; width:max-content; will-change:transform;
  animation:cadres-defile 50s linear infinite;
}
.cadres__item{ flex:0 0 auto; margin:0 1.4rem 0 0; }
.cadres__btn{
  display:block; padding:0; margin:0; cursor:pointer;
  background:#fff; position:relative; overflow:hidden;
  height:clamp(190px,30vh,290px); aspect-ratio:3/2;
  border:1px solid rgba(184,148,106,.5);
  box-shadow:0 18px 44px rgba(10,10,10,.14);
  transition:box-shadow .5s ease, border-color .4s ease;
}
.cadres__btn img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.cadres__btn:hover img,
.cadres__btn:focus-visible img{ transform:scale(1.04); }
.cadres__btn:hover,
.cadres__btn:focus-visible{
  box-shadow:0 26px 56px rgba(10,10,10,.2);
  border-color:rgba(197,165,114,.9);
}
.cadres__btn:focus-visible{ outline:none; }

@keyframes cadres-defile{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }   /* -50 % = exactement une série (la 2e est un clone) → boucle sans couture */
}
/* Mouvement réduit : pas de défilement auto, on laisse glisser au doigt/souris */
@media (prefers-reduced-motion: reduce){
  .cadres__track{ animation:none; }
  .cadres__marquee{ overflow-x:auto; }
}

@media (max-width:860px){
  .cadres{ padding:4.5rem 1.4rem; }
  .cadres__head{ margin-bottom:2.8rem; }
  .cadres__item{ margin-right:.9rem; }
}
@media (max-width:480px){
  /* cadre plus petit → on voit une vignette entière + un aperçu de la suivante */
  .cadres__btn{ height:185px; }
}