/* ─── Maintenance banner ─── */
.maintenance-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 16px; height: 31px;
  background: rgba(255, 184, 108, .15);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 184, 108, .3);
  font-size: .76rem; font-weight: 500; color: #c47a1e;
  letter-spacing: .01em;
}
.maintenance-banner svg { width: 14px; height: 14px; stroke: #c47a1e; fill: none; stroke-width: 1.8; flex-shrink: 0; }
body:has(.maintenance-banner) .navbar { top: 31px; }
body:has(.maintenance-banner) main { padding-top: 108px; }

/* ─── RESET & VARIABLES ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Variables are in variables.css */

/* ── Required asterisk ── */
.required { color: var(--required); font-weight: 500; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only-focusable:focus { position: static; width: auto; height: auto; padding: 8px 16px; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--accent); color: #fff; z-index: 99999; border-radius: 0 0 8px 8px; font-size: .85rem; text-decoration: none; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding-top: 77px;
}

/* ─── BLOBS ─── */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.4;
  pointer-events: none;
  animation: float 9s ease-in-out infinite;
  z-index: 0;
}
.blob-1 { width: 500px; height: 500px; background: radial-gradient(circle, #c5d0fc, #e8e4ff); top: -130px; left: -100px; animation-delay: 0s; }
.blob-2 { width: 360px; height: 360px; background: radial-gradient(circle, #fce4f3, #f5d0f8); bottom: 100px; right: -80px; animation-delay: -3.5s; }
.blob-3 { width: 260px; height: 260px; background: radial-gradient(circle, #c8f0e8, #d0f5d8); top: 45%; left: 50%; animation-delay: -6s; }

@keyframes float {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-24px) scale(1.04); }
}

/* ════════════════════════════════
   NAVBAR — minimaliste Licorne Passion
════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* 1100 : doit dépasser la `.view-toggle` du couloir 3D /campagnes
     (z-index 1000 dans public/app/style.css). Sans ça, la nav crée un
     stacking context à z=100, et la dropdown utilisateur reste prise
     dedans → la pilule LISTE/ESPACE passe par-dessus la dropdown,
     même quand on monte le z-index local de la dropdown. */
  z-index: 1100;
  padding: 0 44px;
  height: 77px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: #fff;
  color: #000;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.navbar.scrolled {
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* Variant transparent (au-dessus d'un hero foncé) */
body.nav-transparent .navbar {
  background: transparent;
  color: #fff;
}
body.nav-transparent .navbar.scrolled {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  box-shadow: none;
}

/* Logo centré */
.nav-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  line-height: 1.1;
}
.nav-logo-name {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: inherit;
}
.nav-logo-tag {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}

/* Liens à gauche */
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  padding-left: 0;
}
.nav-links a {
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.02em;
  position: relative;
  padding: 4px 0;
  transition: opacity 0.18s;
}
.nav-links a:hover { opacity: 0.65; }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
}
.nav-link-disabled {
  pointer-events: none;
  opacity: 0.55;
}

/* Actions à droite */
.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
/* Wrapper "transparent" autour des 3 icônes : sur desktop, `display:
   contents` fait disparaître le wrapper de la mise en page (les icônes
   restent des flex-items directs de `.nav-actions`). Sur mobile (media
   query plus bas), il devient un flex-row pour aligner les icônes
   horizontalement dans le menu burger. */
.nav-actions-icons { display: contents; }
.nav-action-text {
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 0.18s;
}
.nav-action-text:hover { opacity: 0.65; }
.nav-action-text.active { font-weight: 500; }

.nav-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.18s;
}
.nav-icon svg {
  width: 18px; height: 18px;
}
.nav-icon:hover { opacity: 0.65; }
.nav-icon.active { opacity: 1; }
.nav-icon.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.nav-cart-count {
  position: absolute;
  top: -4px; right: -6px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
body.nav-transparent .nav-cart-count {
  background: #fff;
  color: #000;
}

/* Dropdown compte */
.nav-dropdown-wrap {
  position: relative;
}
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 6px;
  /* 1100 : doit passer au-dessus du switch LISTE/ESPACE de la page
     /campagnes (z-index 1000 dans public/app/style.css) sinon il
     chevauche le menu utilisateur. */
  z-index: 1100;
  animation: dropdownIn 0.18s ease both;
  color: #000;
}
.nav-dropdown.open { display: block; }
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-dropdown-header {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown-name {
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #000;
}
.nav-dropdown-email {
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #6a7282;
}
.nav-dropdown-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 4px 0;
}
.nav-dropdown-item {
  display: block;
  padding: 9px 12px;
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.nav-dropdown-item:hover { background: rgba(0,0,0,0.04); }
.nav-dropdown-item--admin { font-weight: 500; }
.nav-dropdown-item--logout:hover { background: rgba(0,0,0,0.04); color: #000; }

/* Burger mobile */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px; height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  color: inherit;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 99;
}
.nav-mobile-overlay.active { display: block; }

/* ════════════════════════════════
   FOOTER — minimaliste Licorne Passion
════════════════════════════════ */
.footer {
  position: relative;
  z-index: 1;
  background: #fff;
  color: #000;
  border-top: 1px solid #000;
  padding: 36px 60px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
  font-family: 'Urbanist', sans-serif;
}

.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 340px;
}
.footer-newsletter-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: #6a7282;
}
.footer-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-newsletter-input {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d1d5dc;
  padding: 0 0 8px;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  outline: none;
  transition: border-color 0.18s;
}
.footer-newsletter-input::placeholder { color: #99a1af; }
.footer-newsletter-input:focus { border-bottom-color: #000; }
.footer-newsletter-submit {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #101828;
  cursor: pointer;
  transition: opacity 0.18s;
}
.footer-newsletter-submit:hover { opacity: 0.6; }

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-self: end;
  gap: 29px;
  margin: 0;
  padding: 0;
}
.footer-links a {
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #4a5565;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.18s;
}
.footer-links a:hover { color: #000; }
.footer-links a.active { color: #000; font-weight: 500; pointer-events: none; }
.footer-link-disabled { pointer-events: none; opacity: 0.65; }

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  text-align: right;
}
.footer-socials {
  display: flex;
  gap: 16px;
  align-items: center;
}
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  color: #000;
  text-decoration: none;
  transition: opacity 0.18s;
}
.footer-social:hover { opacity: 0.55; }
.footer-social svg { width: 18px; height: 18px; }
.footer-social img { width: 100%; height: 100%; object-fit: contain; }

.footer-copy {
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
}
.footer-copy span { color: inherit; }

.footer-cookie-link {
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #6a7282;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s;
}
.footer-cookie-link:hover { color: #000; }

/* ════════════════════════════════
   RESPONSIVE — menu burger
════════════════════════════════ */
@media (max-width: 900px) {

  .navbar {
    padding: 0 20px;
    grid-template-columns: 1fr auto 1fr;
  }

  /* Quand le menu burger est ouvert, on force la navbar en blanc avec
     texte noir, peu importe l'état précédent (transparent sur hero,
     scrolled dark, etc.). Sinon sur les pages avec hero plein écran
     (/a-propos, /), la barre du haut conserve le tint sombre par-dessus
     l'image alors que le burger affiche du contenu sur fond blanc. */
  .navbar:has(.nav-burger.open) {
    background: #fff;
    color: #000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }
  .navbar:has(.nav-burger.open) .nav-burger span { background: #000; }
  body.nav-transparent .navbar:has(.nav-burger.open) .nav-cart-count {
    background: #000;
    color: #fff;
  }

  .nav-burger { display: flex; grid-column: 3; justify-self: end; }

  .nav-logo { grid-column: 2; justify-self: center; }

  .nav-links,
  .nav-actions {
    display: none;
    position: fixed;
    top: 77px;
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    z-index: 100;
    padding: 22px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    color: #000;
  }
  body.nav-transparent .nav-links,
  body.nav-transparent .nav-actions { color: #000; }

  .nav-links { padding-left: 24px; }

  .nav-links.open,
  .nav-actions.open { display: flex; }

  .nav-actions { top: auto; }

  .nav-links a { font-size: 14px; }
  .nav-action-text { font-size: 13px; }

  /* ── Wrapper des 3 icônes : aligné horizontalement en ligne ── */
  .nav-actions-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
    width: 100%;
    padding-top: 6px;
  }

  /* ── Dropdown compte : affichée directement dans le burger (plus
        d'overlay flottant). `display: contents` sur le wrapper fait
        passer le bouton + le menu en flex-items du conteneur `.nav-
        actions-icons`. Le menu prend ensuite 100% en `flex-basis` pour
        passer sur sa propre ligne, et reste TOUJOURS visible quand le
        burger est ouvert (pas de clic supplémentaire requis). ── */
  .nav-dropdown-wrap { display: contents; }

  /* L'icône "user" devient redondante quand on est connecté puisque la
     dropdown affiche déjà le nom + l'email + les actions juste en
     dessous. On la cache en mobile uniquement (le sélecteur ne match
     que le bouton à l'intérieur du wrap, donc reste visible si non
     connecté — c'est un <a> sans wrap dans ce cas). */
  .nav-dropdown-wrap > .nav-icon-account { display: none; }

  .nav-dropdown {
    display: block;
    position: static;
    top: auto; left: auto; right: auto;
    flex-basis: 100%;
    width: 100%;
    margin: 6px 0 0;
    padding: 14px 0 4px;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    animation: none;
    order: 99; /* après cart, sur sa propre ligne */
    z-index: auto;
  }
  .nav-dropdown-header { padding: 0 0 10px; }
  .nav-dropdown-item { padding: 10px 0; }
  .nav-dropdown-divider { margin: 4px 0; }
}

/* Footer responsive */
@media (max-width: 900px) {
  .footer {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
  }
  .footer-newsletter { max-width: 100%; }
  .footer-links { justify-content: flex-start; align-self: start; gap: 18px 24px; }
  .footer-right { align-items: flex-start; text-align: left; }
}

/* ─── LOADING BUTTON STATE ─── */
.btn--loading { cursor: wait !important; opacity: 0.75; }
.btn-icon-spin.spinning {
  display: inline-block !important;
  animation: spin 0.75s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── INLINE FORM ERRORS ─── */
.form-errors { list-style: none; margin: 4px 0 0; padding: 0; }
.form-errors li { font-size: 0.78rem; color: #e55; margin-top: 2px; }
.input--error { border-color: #e55 !important; box-shadow: 0 0 0 3px rgba(220,80,80,.12) !important; }