/* ══════════════════════════════════════════════
   css/rgpd.css — Styles bandeau & modales RGPD
   ══════════════════════════════════════════════ */

/* ─── BANDEAU COOKIES ─── */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--charcoal);
  color: #fff;
  padding: 1.5rem 2rem;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.2);
  transform: translateY(100%);
  animation: slideUpBanner 0.6s 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes slideUpBanner { to { transform: translateY(0); } }
#cookie-banner .cookie-text { flex: 1; font-size: 0.85rem; line-height: 1.6; color: #ddd; }
#cookie-banner .cookie-text strong { color: #fff; font-weight: 500; }
#cookie-banner .cookie-text a { color: var(--gold-light); text-decoration: underline; cursor: pointer; }
#cookie-banner .cookie-actions { display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; }

.btn-cookie-accept {
  background: var(--sage); color: #fff; border: none;
  padding: 0.6rem 1.4rem;
  font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; letter-spacing: 0.05em; transition: background 0.2s;
}
.btn-cookie-accept:hover { background: var(--sage-dark); }

.btn-cookie-refuse {
  background: transparent; color: #aaa;
  border: 1px solid #555;
  padding: 0.6rem 1.4rem;
  font-family: 'Jost', sans-serif; font-size: 0.85rem;
  cursor: pointer; letter-spacing: 0.05em; transition: all 0.2s;
}
.btn-cookie-refuse:hover { color: #fff; border-color: #888; }

.btn-cookie-settings {
  background: none; border: none; color: #888;
  font-family: 'Jost', sans-serif; font-size: 0.8rem;
  cursor: pointer; text-decoration: underline; padding: 0;
}
.btn-cookie-settings:hover { color: var(--gold-light); }

/* ─── MODALE COOKIES ─── */
#cookie-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(44,44,44,0.6);
  z-index: 10000;
  align-items: center; justify-content: center;
  padding: 1rem;
}
#cookie-modal.open { display: flex; }

.cookie-modal-box {
  background: #fff; max-width: 560px; width: 100%;
  padding: 2.5rem; max-height: 90vh; overflow-y: auto;
}
.cookie-modal-box h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; font-weight: 400;
  margin-bottom: 1rem; color: var(--charcoal);
}
.cookie-modal-box p { font-size: 0.85rem; color: var(--mid-grey); margin-bottom: 1.5rem; line-height: 1.7; }

.cookie-category { border: 1px solid var(--border); padding: 1rem 1.2rem; margin-bottom: 0.75rem; }
.cookie-category-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 0.4rem;
}
.cookie-category-header span { font-weight: 500; font-size: 0.9rem; }
.cookie-category p { font-size: 0.8rem; color: var(--mid-grey); margin: 0; line-height: 1.5; }

.toggle-switch {
  width: 42px; height: 24px;
  background: #ddd; border-radius: 12px;
  position: relative; cursor: pointer;
  transition: background 0.3s; flex-shrink: 0;
}
.toggle-switch.on { background: var(--sage); }
.toggle-switch.locked { background: var(--sage); opacity: 0.6; cursor: not-allowed; }
.toggle-switch::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; background: #fff;
  border-radius: 50%; top: 3px; left: 3px;
  transition: left 0.3s;
}
.toggle-switch.on::after,
.toggle-switch.locked::after { left: 21px; }

.cookie-modal-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }

.btn-save-prefs {
  background: var(--sage); color: #fff; border: none;
  padding: 0.7rem 1.6rem;
  font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; letter-spacing: 0.05em; transition: background 0.2s;
}
.btn-save-prefs:hover { background: var(--sage-dark); }

.btn-accept-all-modal {
  background: var(--gold); color: #fff; border: none;
  padding: 0.7rem 1.6rem;
  font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; letter-spacing: 0.05em; transition: background 0.2s;
}
.btn-accept-all-modal:hover { background: var(--gold-light); }

/* ─── BOUTON FLOTTANT RGPD ─── */
#rgpd-btn {
  position: fixed; bottom: 1.5rem; left: 1.5rem;
  width: 46px; height: 46px;
  background: var(--charcoal); color: #fff;
  border: none; border-radius: 50%;
  font-size: 1rem; cursor: pointer;
  z-index: 8000; display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: background 0.2s;
}
#rgpd-btn.show { display: flex; }
#rgpd-btn:hover { background: var(--sage-dark); }

/* ─── MODALES MENTIONS / CONFIDENTIALITÉ ─── */
#modal-mentions,
#modal-confidentialite {
  display: none; position: fixed; inset: 0;
  background: rgba(44,44,44,0.7);
  z-index: 10001;
  align-items: center; justify-content: center;
  padding: 1rem;
}
#modal-mentions.open,
#modal-confidentialite.open { display: flex; }

.modal-box {
  background: var(--warm-white);
  max-width: 720px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  padding: 3rem; position: relative;
}
.modal-box h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem; font-weight: 300;
  margin-bottom: 1.5rem; color: var(--charcoal);
}
.modal-box h3 { font-size: 0.95rem; font-weight: 500; margin: 1.8rem 0 0.6rem; color: var(--charcoal); }
.modal-box p { font-size: 0.85rem; color: var(--mid-grey); line-height: 1.8; margin-bottom: 0.8rem; font-weight: 300; }
.modal-box ul { margin: 0.5rem 0 1rem 1.2rem; font-size: 0.85rem; color: var(--mid-grey); line-height: 1.8; font-weight: 300; }

.modal-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: none; font-size: 1.5rem;
  cursor: pointer; color: var(--mid-grey); line-height: 1;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--charcoal); }

.rgpd-highlight {
  background: #EEF2EE;
  border-left: 3px solid var(--sage);
  padding: 1rem 1.2rem; margin: 1rem 0;
  font-size: 0.82rem; color: var(--mid-grey); line-height: 1.7;
}

/* ─── RESPONSIVE RGPD ─── */
@media (max-width: 680px) {
  #cookie-banner { flex-direction: column; padding: 1.5rem; }
  .cookie-actions { width: 100%; }
  .modal-box { padding: 2rem 1.5rem; }
}