/* ============================================================
   FLO'S DÉCO — Page "Réalisation"
   Complète flos.css (n'en duplique pas les tokens / atomes).
   ============================================================ */

/* ---- Titre hero réalisation ------------------------------- */
.subhero h1{
  font-size:clamp(1.8rem,3.5vw,2.8rem) !important;
  line-height:1.2 !important;
}

/* ---- Intro réalisation ------------------------------------ */
.real-intro{ background:var(--cream); padding:clamp(56px,8vw,96px) 0; }
.real-intro__in{ max-width:800px; margin:0 auto; }
.real-intro .meta{ display:flex; align-items:center; gap:14px; margin-bottom:26px; flex-wrap:wrap; }
.real-intro .cat{
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent); border-radius:100px; padding:7px 16px;
}
.real-intro .place{ font-size:13px; letter-spacing:.06em; color:var(--muted); }
.real-intro p{ color:var(--ink-soft); margin-bottom:1.1em; max-width:64ch; }
.real-intro .intro-lead{
  font-family:var(--display); font-weight:var(--title-weight);
  font-size:clamp(21px,2.4vw,30px); line-height:1.35; color:var(--ink); margin-bottom:1.1em;
}

/* ---- Section Avant / Après -------------------------------- */
.ba{ background:var(--paper); padding:clamp(60px,8vw,110px) 0; }
.ba__pairs{ display:flex; flex-direction:column; gap:3rem; margin-top:52px; }
.ba__pair{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:start;
  gap:0 clamp(20px,3vw,44px);
}
.ba__cell{ min-width:0; }
.ba__label{
  display:block; font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.ba__cell--after .ba__label{ color:var(--accent); }
.ba__frame{
  border-radius:var(--radius); overflow:hidden; aspect-ratio:4 / 3;
  box-shadow:0 16px 40px rgba(28,28,28,.16); background:var(--line);
}
.ba__frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s var(--ease);
}
.ba__cell:hover .ba__frame img{ transform:scale(1.02); }

/* séparateur vertical avec ligne accent */
.ba__div{ align-self:stretch; display:flex; flex-direction:column; align-items:center; padding-top:32px; }
.ba__div .line{ width:2px; flex:1; background:var(--accent); border-radius:2px; opacity:.7; }
.ba__div .dot{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; margin:10px 0; box-shadow:0 6px 16px rgba(28,28,28,.2);
}

/* ---- Galerie photos (mosaïque asymétrique) ---------------- */
.gallery-r{ background:var(--cream); padding:clamp(60px,8vw,110px) 0; }
.rmosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:52px; }
.rtile{
  position:relative; overflow:hidden; border-radius:12px; cursor:pointer;
  aspect-ratio:4 / 3; background:var(--line); border:0; padding:0; width:100%;
}
.rtile--wide{ grid-column:span 2; }
.rtile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s var(--ease); }
.rtile:hover img{ transform:scale(1.05); }
.rtile__ov{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(20,18,16,.0); transition:background .35s var(--ease);
}
.rtile:hover .rtile__ov{ background:rgba(20,18,16,.42); }
.rtile__ov svg{
  width:46px; height:46px; color:#fff; opacity:0; transform:scale(.85);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.rtile:hover .rtile__ov svg{ opacity:1; transform:scale(1); }

/* ---- Lightbox --------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:90vw; max-height:90vh; border-radius:8px; object-fit:contain;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transform:scale(.97); transition:transform .35s var(--ease);
}
.lightbox.open .lightbox__img{ transform:scale(1); }
.lb-btn{
  position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  color:#fff; width:54px; height:54px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, transform .3s ease;
}
.lb-btn:hover{ background:rgba(255,255,255,.22); }
.lb-btn svg{ width:24px; height:24px; }
.lb-prev{ left:clamp(14px,4vw,48px); top:50%; transform:translateY(-50%); }
.lb-next{ right:clamp(14px,4vw,48px); top:50%; transform:translateY(-50%); }
.lb-prev:hover{ transform:translateY(-50%) scale(1.08); }
.lb-next:hover{ transform:translateY(-50%) scale(1.08); }
.lb-close{ top:clamp(14px,3vw,32px); right:clamp(14px,3vw,32px); width:48px; height:48px; }
.lb-close:hover{ transform:scale(1.08); }
.lb-count{
  position:absolute; bottom:clamp(16px,4vw,40px); left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.8); font-size:14px; letter-spacing:.1em; font-variant-numeric:tabular-nums;
}

/* ---- Footer de page --------------------------------------- */
.real-foot{ background:var(--cream); padding:0 0 clamp(70px,9vw,110px); }
.real-foot__rule{ margin-bottom:clamp(40px,6vw,68px); }
.real-foot__actions{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}

/* ---- Responsive ------------------------------------------- */
@media (max-width:760px){
  .ba__pair{ grid-template-columns:1fr; gap:28px; }
  .ba__div{ flex-direction:row; padding-top:0; }
  .ba__div .line{ width:auto; height:2px; flex:1; }
  .ba__div .dot{ margin:0 10px; }
  .rmosaic{ grid-template-columns:repeat(2,1fr); }
  .rtile--wide{ grid-column:span 2; }
  .real-foot__actions{ flex-direction:column; align-items:stretch; }
  .real-foot__actions .btn{ width:100%; justify-content:center; }
}
@media (max-width:460px){
  .rmosaic{ grid-template-columns:1fr; }
  .rtile--wide{ grid-column:span 1; }
}