/* ══ Loader ══ */
/* ─── Loader ─────────────────────────────────────────────── */
#loader {
  position:fixed; inset:0; background:var(--bg); z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .4s, visibility .4s;
}
#loader.out { opacity:0; visibility:hidden; }
.loader-ring {
  width:36px; height:36px;
  border:2px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite;
}

/* ══ Toasts ══ */
/* ─── Toast ─────────────────────────────────────────────── */
#toasts {
  position:fixed; bottom:2rem; right:2rem; z-index:8000;
  display:flex; flex-direction:column; gap:.5rem; pointer-events:none;
}
.toast {
  background:var(--bg3); border-left:3px solid var(--accent);
  padding:.75rem 1.1rem; border-radius:var(--r);
  font-size:.82rem; max-width:320px; pointer-events:all;
  box-shadow:var(--shadow); animation:slideIn .3s ease;
}
.toast.err { border-left-color:var(--error); }
.toast.ok  { border-left-color:var(--success); }
@keyframes slideIn { from { transform:translateX(110%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* ══ Modales ══ */
/* ─── Modal overlay ──────────────────────────────────────── */
.overlay {
  position:fixed; inset:0; background:var(--overlay-bg);
  z-index:700; display:flex; align-items:flex-start; justify-content:center;
  padding:2rem; backdrop-filter:blur(5px); overflow-y:auto;
}
.modal {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:2rem 2.2rem;
  max-width:460px; width:100%; box-shadow:var(--shadow); margin:auto;
}
.modal h3 { font-family:var(--serif); font-size:1.4rem; font-weight:400; margin-bottom:.9rem; }
.modal p  { font-size:.84rem; color:var(--text-mid); line-height:1.7; }
.modal-foot { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1.5rem; }
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:.75rem; color:var(--text-mid); margin-bottom:.35rem; letter-spacing:.05em; }

/* ══ Bandeau cookies ══ */
/* ─── Cookie banner ──────────────────────────────────────── */
#cookie {
  position:fixed; right:1.5rem; top:50%; transform:translateY(-50%); z-index:600;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2);
  padding:1.1rem 1.3rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.8rem;
  font-size:.76rem; color:var(--text-mid);
  max-width:240px; box-shadow:var(--shadow-md);
}
#cookie .cookie-title { font-weight:600; color:var(--text); font-size:.8rem; }
#cookie .cookie-btns  { display:flex; gap:.5rem; width:100%; }
#cookie .cookie-btns button { flex:1; }

/* ══ Newsletter — bouton flottant ══ */
/* ─── Newsletter FAB ────────────────────────────────────── */
#nl-fab {
  position:fixed; bottom:1.8rem; left:1.8rem; z-index:580;
  height:38px; padding:0 1rem 0 .75rem; border-radius:999px;
  background:var(--bg2); border:1px solid var(--border);
  color:var(--text-mid); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; cursor:pointer;
  display:flex; align-items:center; gap:.5rem;
  box-shadow:var(--shadow-sm);
  transition:opacity .3s ease, transform .3s ease, background .2s, color .2s, border-color .2s;
  opacity:0; transform:translateY(8px); pointer-events:none;
  white-space:nowrap;
}
#nl-fab.show { opacity:1; transform:translateY(0); pointer-events:auto; }
#nl-fab:hover { background:var(--bg3); color:var(--accent); border-color:var(--accent); }

/* ══ Newsletter — popup ══ */
/* ─── Newsletter popup ──────────────────────────────────── */
#nl-popup {
  position:fixed; bottom:1.8rem; right:1.8rem; z-index:590;
  background:var(--bg2); border:1px solid var(--border); border-top:2px solid var(--accent);
  border-radius:var(--r2); padding:1.4rem 1.5rem; max-width:295px; width:calc(100vw - 3rem);
  box-shadow:var(--shadow-md);
  transform:translateY(130%); opacity:0;
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
#nl-popup.show { transform:translateY(0); opacity:1; }
.nl-close { position:absolute; top:.5rem; right:.6rem; background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:1.1rem; line-height:1; padding:.2rem .35rem; }
.nl-close:hover { color:var(--accent); }
.nl-title { font-family:var(--serif); font-size:1.05rem; font-weight:300; letter-spacing:.04em; margin-bottom:.3rem; padding-right:1.4rem; color:var(--text); }
.nl-sub   { font-size:.75rem; color:var(--text-mid); line-height:1.6; margin-bottom:.9rem; }
.nl-row   { display:flex; gap:.4rem; }
.nl-row input { flex:1; min-width:0; font-size:.82rem; }
.nl-rgpd  { font-size:.63rem; color:var(--text-dim); margin-top:.55rem; line-height:1.55; }
.nl-ok    { text-align:center; padding:.4rem 0; }
.nl-ok-icon { font-size:1.6rem; margin-bottom:.3rem; }
.nl-ok-text { font-family:var(--serif); font-size:.95rem; font-weight:300; color:var(--accent); }

/* ══ Lightbox ══ */
/* ─── Lightbox ───────────────────────────────────────────── */
#lightbox {
  position:fixed; inset:0; background:var(--lightbox-bg);
  z-index:500; display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.lb-img { max-width:88vw; max-height:88vh; object-fit:contain; border-radius:var(--r); box-shadow:var(--shadow); }
.lb-btn {
  position:absolute; width:48px; height:48px; border-radius:50%;
  background:var(--lb-btn-bg); color:var(--text-mid);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t); cursor:pointer;
}
.lb-btn:hover { background:var(--bg3); color:var(--text); }
#lb-close { top:1.2rem; right:1.4rem; }
#lb-prev  { left:1rem; top:50%; transform:translateY(-50%); }
#lb-next  { right:1rem; top:50%; transform:translateY(-50%); }
#lb-info  { position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%); font-size:.76rem; color:var(--text-dim); letter-spacing:.1em; white-space:nowrap; }

/* ══ État vide ══ */
/* ─── Empty state ────────────────────────────────────────── */
.empty { text-align:center; padding:4rem 2rem; color:var(--text-dim); }
.empty svg { width:60px; height:60px; margin:0 auto 1.3rem; opacity:.18; }
.empty p { font-size:.84rem; line-height:1.7; }

/* ══ Modale large (inscription) ══ */
/* ─── Modal wide (inscription) ───────────────────────────── */
.modal-wide { max-width:560px; }
.modal-tabs { display:flex; margin-bottom:1.4rem; border-bottom:1px solid var(--border); }
.modal-tab  { padding:.55em 1.3em; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all var(--t); }
.modal-tab.on { color:var(--accent); border-bottom-color:var(--accent); }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.form-row-addr { display:grid; grid-template-columns:3fr 1fr; gap:.75rem; }
.form-row-city { display:grid; grid-template-columns:1fr 2fr; gap:.75rem; }

/* ══ Sélecteur de couverture ══ */
/* ─── Cover picker ───────────────────────────────────────── */
.modal-cover { max-width:680px; }
.cover-pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.5rem; max-height:420px; overflow-y:auto; margin-top:1rem; padding-right:.2rem; }
.cover-pick-item { position:relative; aspect-ratio:1; cursor:pointer; border-radius:var(--r); overflow:hidden; border:2px solid transparent; transition:border-color var(--t); }
.cover-pick-item:hover { border-color:var(--border2); }
.cover-pick-item.sel  { border-color:var(--accent); }
.cover-pick-item img  { width:100%; height:100%; object-fit:cover; display:block; }
.cover-pick-ref { position:absolute; bottom:0; left:0; right:0; padding:.25em .4em; background:var(--scrim); font-size:.62rem; color:var(--text-mid); text-align:center; letter-spacing:.04em; }

/* ══ Espace client ══ */
/* ─── Client account overlay ─────────────────────────────── */
.acc-row { display:flex; gap:.5rem; align-items:baseline; padding:.55rem 0; border-bottom:1px solid var(--border); font-size:.84rem; }
.acc-lbl { width:110px; font-size:.72rem; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; flex-shrink:0; }