/* ============================================================
   VILLANI — PLV PORTAL — design system
   Editorial surface : ivoire + bronze, Lato/Lusitana, motion lente
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Lusitana:wght@400;700&family=Cormorant+SC:wght@400;500;600&display=swap');

:root{
  --bronzo:#B5916A; --bronzo-deep:#8E6D4A; --bronzo-light:#D4B488;
  --nero:#0A0805; --nero-2:#1A1410;
  --bianco:#FFFFFF; --bianco-warm:#F5EFE3;
  --edl-paper:#F4ECDC; --edl-cream:#EADFC4;
  --edl-ink:#2A1D14; --edl-ink-2:#4A382C; --edl-ink-3:#7A6B5D;
  --edl-rule:rgba(42,29,20,.18); --edl-rule-soft:rgba(42,29,20,.08);
  --rouge-rupture:#8B2C2C;
  --vert-stock:#3D5A2C;
  --jaune-warn:#A07A2E;

  --font-display:'Cinzel','Trajan Pro',Georgia,serif;
  --font-sans:'Lato','Helvetica Neue',system-ui,sans-serif;
  --font-serif:'Lusitana','Garamond',Georgia,serif;
  --font-overline:'Cormorant SC','Lusitana',Georgia,serif;

  --tracking-overline:.32em;
  --tracking-display:.18em;
  --tracking-body-spaced:.28em;

  --ease:cubic-bezier(0.22,1,0.36,1);
  --content-max:1320px;
  --gutter:clamp(20px,4vw,64px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--edl-paper);
  color:var(--edl-ink);
  font-family:var(--font-sans);
  font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
hr{border:0;border-top:1px solid var(--edl-rule);margin:24px 0}

/* ── Ornaments ───────────────────────────────────────────── */
.t-overline{
  font-family:var(--font-sans);
  font-size:11px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  color:var(--bronzo-deep);
}
.t-spaced{ letter-spacing:var(--tracking-body-spaced); text-transform:uppercase; }
.ornament-dots{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--bronzo); margin:14px 0;
}
.ornament-dots::before,.ornament-dots::after{
  content:""; flex:1; max-width:120px;
  border-top:1px dotted var(--bronzo);
}
.ornament-dots span{font-size:6px; opacity:.7}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-wrapper{
  position:fixed; inset:0; z-index:100;
  background:var(--nero);
  color:var(--bianco);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-wrapper::before{
  content:""; position:absolute; inset:0;
  background-image:url('../assets/illustration-toile-heritage.png');
  background-size:cover; background-position:center;
  opacity:.10; mix-blend-mode:screen; pointer-events:none;
}
.login-card{
  position:relative;
  width:min(440px,100%);
  text-align:center;
  padding:56px 40px;
  border:1px solid rgba(181,145,106,.35);
  background:rgba(10,8,5,.6);
  backdrop-filter:blur(8px);
}
.login-card .logo-wm{
  width:140px; margin:0 auto 28px;
  filter:invert(1) brightness(1.2);
  opacity:.9;
}
.login-card h1{
  font-family:var(--font-display); font-weight:500;
  font-size:22px; letter-spacing:var(--tracking-display);
  text-transform:uppercase; color:var(--bronzo);
  margin-bottom:6px;
}
.login-card .sub{
  font-family:var(--font-serif); font-style:italic;
  color:rgba(255,255,255,.65); font-size:14px;
  margin-bottom:36px;
}
.login-field{ display:block; margin-bottom:18px; text-align:left; }
.login-field > span{
  display:block; font-size:11px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase; color:var(--bronzo-light);
  margin-bottom:8px;
}
.login-field input{
  width:100%; padding:12px 0;
  background:transparent; border:0;
  border-bottom:1px solid rgba(255,255,255,.2);
  color:var(--bianco); font-size:15px;
  outline:none; transition:border-color .28s var(--ease);
}
.login-field input:focus{ border-bottom-color:var(--bronzo) }
.login-btn{
  width:100%; margin-top:18px;
  padding:14px 24px;
  background:var(--bronzo); color:var(--nero);
  font-size:12px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  border-radius:2px;
  transition:background .2s var(--ease);
}
.login-btn:hover{ background:var(--bronzo-deep); color:var(--bianco) }
.login-err{
  margin-top:14px; min-height:18px;
  color:#E8C9C5; font-size:12px; font-style:italic;
}
.login-foot{
  margin-top:36px; font-size:11px; color:rgba(255,255,255,.4);
  letter-spacing:.08em; text-transform:uppercase;
}

/* ============================================================
   HEADER
   ============================================================ */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(244,236,220,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--edl-rule);
}
.header-inner{
  max-width:var(--content-max); margin:0 auto;
  padding:18px var(--gutter);
  display:flex; align-items:center; gap:24px;
  flex-wrap:wrap;
}
.header-inner .logo{ height:36px; flex-shrink:0 }
.header-meta{
  display:flex; flex-direction:column; line-height:1.2;
  border-left:1px solid var(--edl-rule); padding-left:20px;
}
.header-meta .title{
  font-family:var(--font-display);
  font-size:14px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bronzo-deep);
}
.header-meta .sub{
  font-family:var(--font-serif); font-style:italic;
  font-size:12px; color:var(--edl-ink-3);
  margin-top:2px;
}
.header-actions{
  margin-left:auto; display:flex; align-items:center; gap:16px;
  flex-wrap:wrap;
}
.who{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--edl-ink-2);
}
.who b{ color:var(--edl-ink); font-weight:700 }
.who .role{
  display:inline-block; margin-left:8px;
  padding:2px 8px; border:1px solid var(--bronzo);
  color:var(--bronzo-deep); border-radius:999px;
  font-size:9px; font-weight:700; letter-spacing:.2em;
}
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px;
  background:var(--nero); color:var(--bianco);
  font-size:11px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  border-radius:2px;
  transition:background .2s var(--ease);
}
.btn-primary:hover{ background:var(--bronzo-deep) }
.btn-primary .count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px;
  background:var(--bronzo); color:var(--nero);
  border-radius:999px; font-size:11px; font-weight:900;
}
.btn-ghost{
  padding:10px 16px;
  border:1px solid var(--edl-rule); border-radius:2px;
  font-size:11px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  color:var(--edl-ink-2);
  transition:all .2s var(--ease);
}
.btn-ghost:hover{ border-color:var(--bronzo); color:var(--bronzo-deep) }
.logout{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--edl-ink-3); padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.logout:hover{ color:var(--bronzo-deep); border-bottom-color:var(--bronzo) }

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  padding:64px var(--gutter) 40px;
  max-width:var(--content-max); margin:0 auto;
  text-align:center;
}
.intro h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(34px,5vw,56px);
  letter-spacing:var(--tracking-display);
  text-transform:uppercase;
  color:var(--edl-ink);
  margin:14px 0 18px;
}
.intro .lead{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(15px,1.4vw,18px);
  color:var(--edl-ink-2);
  max-width:580px; margin:0 auto;
  line-height:1.7;
}

/* ============================================================
   TOOLBAR
   ============================================================ */
.toolbar{
  max-width:var(--content-max); margin:0 auto;
  padding:48px var(--gutter) 28px;
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center;
}
.search{
  position:relative; flex:1 1 260px; max-width:420px;
}
.search input{
  width:100%; padding:13px 16px 13px 44px;
  background:var(--bianco-warm);
  border:1px solid var(--edl-rule);
  border-radius:2px;
  font-size:14px;
  outline:none; transition:border-color .2s var(--ease);
}
.search input:focus{ border-color:var(--bronzo) }
.search svg{
  position:absolute; left:14px; top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  color:var(--edl-ink-3); stroke-width:1.5;
}
.filter-group{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  padding:9px 16px;
  background:transparent;
  border:1px solid var(--edl-rule);
  border-radius:999px;
  font-size:11px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  color:var(--edl-ink-2);
  transition:all .2s var(--ease);
}
.chip:hover{ border-color:var(--bronzo); color:var(--bronzo-deep) }
.chip.active{
  background:var(--nero); border-color:var(--nero); color:var(--bianco);
}
.results-count{
  margin-left:auto; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--edl-ink-3);
}

/* ============================================================
   CATALOG GRID
   ============================================================ */
.catalog{
  max-width:var(--content-max); margin:0 auto;
  padding:0 var(--gutter) 96px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:36px 28px;
}
.card{
  display:flex; flex-direction:column;
  background:var(--bianco-warm);
  border:1px solid var(--edl-rule-soft);
  transition:border-color .3s var(--ease);
  position:relative;
}
.card:hover{ border-color:var(--bronzo) }
.card.inactive{ opacity:.55 }
.card .photo{
  position:relative; aspect-ratio:4/3;
  background:#EFE6D2 url('../assets/illustration-toile-heritage.png') center/cover;
  background-blend-mode:luminosity;
  overflow:hidden;
}
.card .photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(244,236,220,.5),rgba(244,236,220,.1));
  pointer-events:none;
}
.card .photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
  position:relative; z-index:1;
}
.card:hover .photo img{ transform:scale(1.04) }
.card .photo .placeholder{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--bronzo-deep);
  font-family:var(--font-display);
  font-size:34px; letter-spacing:.2em;
  opacity:.45;
}
.card .badge{
  position:absolute; top:14px; left:14px;
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px;
  background:var(--bianco-warm);
  border:1px solid currentColor;
  border-radius:999px;
  font-size:9.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  z-index:3;
}
.badge.stock{ color:var(--vert-stock) }
.badge.rupture{ color:var(--rouge-rupture) }
.badge.inactive{ color:var(--edl-ink-3) }
.badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:currentColor;
}
.card .body{
  padding:22px 22px 18px;
  display:flex; flex-direction:column; flex:1;
}
.card .code{
  font-family:var(--font-sans);
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--bronzo-deep);
  margin-bottom:8px;
}
.card .name{
  font-family:var(--font-sans); font-weight:700;
  font-size:16px; line-height:1.3;
  color:var(--edl-ink);
  margin-bottom:14px;
  min-height:42px;
}
.card .specs{
  font-family:var(--font-serif);
  font-size:13px; font-style:italic;
  color:var(--edl-ink-3);
  line-height:1.5;
  margin-bottom:18px;
  flex:1;
}
.card .specs div{ margin-bottom:3px }
.card .stock-line{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-top:14px;
  border-top:1px solid var(--edl-rule-soft);
  margin-bottom:14px;
}
.card .stock-line .lab{
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--edl-ink-3);
}
.card .stock-line .val{
  font-family:var(--font-display); font-weight:500;
  font-size:22px; color:var(--edl-ink);
}
.card .stock-line .val.zero{ color:var(--rouge-rupture) }

.qty-row{ display:flex; align-items:stretch; gap:10px }
.qty-input{
  display:flex; align-items:center;
  border:1px solid var(--edl-rule);
  border-radius:2px; overflow:hidden;
  background:var(--bianco-warm);
}
.qty-input button{
  width:36px; height:40px;
  font-size:16px; font-weight:700;
  color:var(--bronzo-deep);
  transition:background .2s var(--ease);
}
.qty-input button:hover{ background:var(--edl-cream) }
.qty-input input{
  width:46px; height:40px; text-align:center;
  font-size:14px; font-weight:700;
  background:transparent; border:0; outline:none;
  -moz-appearance:textfield;
}
.qty-input input::-webkit-outer-spin-button,
.qty-input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.add-btn{
  flex:1; padding:0 16px;
  background:var(--nero); color:var(--bianco);
  font-size:11px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  border-radius:2px;
  transition:background .2s var(--ease);
}
.add-btn:hover{ background:var(--bronzo-deep) }
.add-btn:disabled{
  background:var(--edl-rule); color:var(--edl-ink-3);
  cursor:not-allowed;
}
.add-btn.added{
  background:var(--vert-stock); animation:pulse .5s var(--ease);
}
@keyframes pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.04)} 100%{transform:scale(1)} }

/* ============================================================
   DRAWER + MODAL
   ============================================================ */
.drawer-backdrop{
  position:fixed; inset:0; z-index:90;
  background:rgba(10,8,5,.55);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.drawer-backdrop.open{ opacity:1; pointer-events:auto }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:95;
  width:min(520px,100%);
  background:var(--edl-paper);
  border-left:1px solid var(--edl-rule);
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0) }
.drawer-head{
  padding:28px 32px 22px;
  border-bottom:1px solid var(--edl-rule);
  display:flex; align-items:center; justify-content:space-between;
}
.drawer-head h2{
  font-family:var(--font-display); font-weight:500;
  font-size:18px; letter-spacing:var(--tracking-display);
  text-transform:uppercase; color:var(--edl-ink);
}
.drawer-head .close{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  color:var(--edl-ink-3);
  transition:color .2s var(--ease);
}
.drawer-head .close:hover{ color:var(--edl-ink) }
.drawer-body{ flex:1; overflow-y:auto; padding:24px 32px }

.cart-empty{
  text-align:center; padding:60px 0;
  color:var(--edl-ink-3);
  font-family:var(--font-serif); font-style:italic;
}
.cart-item{
  display:grid;
  grid-template-columns:60px 1fr auto;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--edl-rule-soft);
  align-items:center;
}
.cart-item .ci-photo{
  width:60px; height:60px;
  background:var(--edl-cream);
  border:1px solid var(--edl-rule-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--bronzo-deep);
  font-family:var(--font-display); font-size:10px;
  letter-spacing:.1em; text-align:center; padding:4px;
  overflow:hidden;
}
.cart-item .ci-photo img{ width:100%; height:100%; object-fit:cover }
.cart-item .ci-code{
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--bronzo-deep); margin-bottom:4px;
}
.cart-item .ci-name{
  font-size:13px; font-weight:700;
  color:var(--edl-ink); margin-bottom:4px;
}
.cart-item .ci-meta{
  font-size:12px; color:var(--edl-ink-3); font-style:italic;
  font-family:var(--font-serif);
}
.cart-item .ci-controls{ display:flex; align-items:center; gap:10px }
.ci-qty{
  display:flex; align-items:center;
  border:1px solid var(--edl-rule);
  border-radius:2px; overflow:hidden;
}
.ci-qty button{ width:28px; height:30px; font-size:14px; font-weight:700; color:var(--bronzo-deep) }
.ci-qty button:hover{ background:var(--edl-cream) }
.ci-qty input{
  width:38px; height:30px; text-align:center; border:0;
  background:transparent; font-size:13px; font-weight:700; outline:none;
  -moz-appearance:textfield;
}
.ci-qty input::-webkit-outer-spin-button,
.ci-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.ci-remove{
  color:var(--rouge-rupture); padding:4px;
  opacity:.6; transition:opacity .2s var(--ease);
}
.ci-remove:hover{ opacity:1 }

.drawer-foot{
  border-top:1px solid var(--edl-rule);
  padding:24px 32px 28px;
  background:var(--bianco-warm);
}
.cart-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:18px;
}
.cart-total .lab{
  font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--edl-ink-3);
}
.cart-total .val{
  font-family:var(--font-display); font-weight:500;
  font-size:24px; color:var(--edl-ink);
}
.checkout-btn{
  width:100%; padding:16px;
  background:var(--bronzo); color:var(--nero);
  font-size:12px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  border-radius:2px;
  transition:background .2s var(--ease);
}
.checkout-btn:hover{ background:var(--bronzo-deep); color:var(--bianco) }
.checkout-btn:disabled{
  background:var(--edl-rule); color:var(--edl-ink-3);
  cursor:not-allowed;
}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; z-index:120;
  background:rgba(10,8,5,.65);
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.modal-backdrop.open{ display:flex }
.modal{
  width:min(720px,100%); max-height:92vh; overflow-y:auto;
  background:var(--edl-paper);
  padding:40px clamp(24px,5vw,56px);
  position:relative;
  border-top:3px solid var(--bronzo);
}
.modal-close{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  color:var(--edl-ink-3);
}
.modal-close:hover{ color:var(--edl-ink) }
.modal h2{
  font-family:var(--font-display); font-weight:500;
  font-size:22px; letter-spacing:var(--tracking-display);
  text-transform:uppercase; color:var(--edl-ink);
  text-align:center; margin-top:6px; margin-bottom:6px;
}
.modal .modal-sub{
  text-align:center;
  font-family:var(--font-serif); font-style:italic;
  color:var(--edl-ink-2); font-size:13px;
  margin-bottom:28px;
}
.field{ margin-bottom:18px }
.field label{
  display:block;
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--bronzo-deep); margin-bottom:7px;
}
.field input,.field textarea,.field select{
  width:100%; padding:11px 14px;
  background:var(--bianco-warm);
  border:1px solid var(--edl-rule);
  border-radius:2px;
  font-size:14px; outline:none;
  transition:border-color .2s var(--ease);
  font-family:var(--font-sans);
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--bronzo) }
.field textarea{ resize:vertical; min-height:90px; line-height:1.5 }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.field-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px }
@media(max-width:520px){
  .field-row,.field-row-3{ grid-template-columns:1fr }
}
.section-title{
  font-size:11px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase; color:var(--edl-ink-3);
  padding-bottom:8px; margin-bottom:16px; margin-top:8px;
  border-bottom:1px solid var(--edl-rule);
}
.submit-btn{
  width:100%; padding:16px; margin-top:8px;
  background:var(--nero); color:var(--bianco);
  font-size:12px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  border-radius:2px;
  transition:background .2s var(--ease);
}
.submit-btn:hover{ background:var(--bronzo-deep) }
.danger-btn{
  padding:11px 18px;
  background:transparent;
  border:1px solid var(--rouge-rupture);
  color:var(--rouge-rupture);
  font-size:11px; font-weight:700;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  border-radius:2px;
  transition:all .2s var(--ease);
}
.danger-btn:hover{ background:var(--rouge-rupture); color:var(--bianco) }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{
  background:var(--nero); color:var(--bianco);
  padding:48px var(--gutter) 36px;
  text-align:center; margin-top:auto;
}
footer.site .wm{
  width:120px; margin:0 auto 16px;
  filter:invert(1) brightness(1.2); opacity:.85;
}
footer.site .tagline{
  font-family:var(--font-serif); font-style:italic;
  color:rgba(255,255,255,.55); font-size:13px;
  margin-bottom:18px;
}
footer.site .small{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}

/* ── Notification toast ────────────────────────────────── */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  z-index:200;
  background:var(--nero); color:var(--bianco);
  padding:14px 24px;
  border-left:3px solid var(--bronzo);
  font-size:13px; letter-spacing:.04em;
  box-shadow:0 16px 40px rgba(0,0,0,.32);
  opacity:0; pointer-events:none;
  transition:all .3s var(--ease);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto }
.toast.error{ border-left-color:var(--rouge-rupture) }
.toast.success{ border-left-color:var(--vert-stock) }

/* ============================================================
   CARROUSEL (carte produit) + LIGHTBOX
   ============================================================ */
.card .photo{ cursor:pointer; }
.card .photo img{ cursor:zoom-in; }

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:4;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(244,236,220,.85);
  border:1px solid var(--edl-rule);
  color:var(--edl-ink);
  font-size:22px; line-height:1;
  border-radius:50%;
  opacity:0;
  transition:opacity .25s var(--ease), background .2s var(--ease);
}
.card .photo:hover .carousel-arrow{ opacity:1 }
.carousel-arrow:hover{ background:var(--bronzo); color:var(--nero) }
.carousel-arrow.prev{ left:10px }
.carousel-arrow.next{ right:10px }

.carousel-dots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  z-index:4; display:flex; gap:6px;
}
.carousel-dots .cdot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(42,29,20,.3);
  transition:background .2s var(--ease);
}
.carousel-dots .cdot.active{ background:var(--bronzo) }

.photo-count{
  position:absolute; bottom:10px; right:12px; z-index:4;
  background:rgba(10,8,5,.7); color:var(--bianco);
  font-size:10px; font-weight:700; letter-spacing:.1em;
  padding:3px 8px; border-radius:999px;
}

/* Lightbox plein écran */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(10,8,5,.94);
  display:none; align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.open{ display:flex }
.lb-stage{
  max-width:90vw; max-height:88vh;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.lb-stage img{
  max-width:90vw; max-height:80vh;
  object-fit:contain;
  border:1px solid rgba(181,145,106,.3);
  background:var(--nero-2);
}
.lb-caption{
  color:rgba(255,255,255,.8);
  font-family:var(--font-serif); font-style:italic;
  font-size:14px; text-align:center;
  letter-spacing:.02em;
}
.lb-caption #lb-counter{ color:var(--bronzo-light); font-style:normal; font-weight:700 }
.lb-close{
  position:absolute; top:24px; right:28px;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:50%;
  transition:background .2s var(--ease);
}
.lb-close:hover{ background:rgba(255,255,255,.2) }
.lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:32px; line-height:1;
  border-radius:50%;
  transition:background .2s var(--ease);
}
.lb-arrow:hover{ background:var(--bronzo); color:var(--nero); border-color:var(--bronzo) }
.lb-arrow.prev{ left:28px }
.lb-arrow.next{ right:28px }
@media(max-width:640px){
  .lb-arrow{ width:42px; height:42px; font-size:24px }
  .lb-arrow.prev{ left:10px } .lb-arrow.next{ right:10px }
  .lb-close{ top:14px; right:14px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}