:root {
  --bg: #feffed;
  --bg-rgb: #feffed00;
  --text: #003235;
  --text-muted: #003235;
  --accent: #FA4339;
  --accent-rgb: 250, 67, 57;
  --card-bg: transparent;
  --border: #FA4339;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
@font-face {
  font-family: 'ZTNature';
  src: url('font/ZTNature-Medium.otf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'ZTNature-italic';
  src: url('font/ZTNature-ThinItalic.otf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'ZTNature-regular';
  src: url('font/ZTNature-Regular.otf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

html {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'ZTNature', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}


/* ══════════════════════════════════════
   PAGES (navigation sans rechargement)
══════════════════════════════════════ */
.page {
  display: none;
  min-height: 100vh;
  position: relative;
}
.page.active {
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--accent);
  opacity: 0.8;
  z-index: 10;
  pointer-events: auto;
  font-family: 'ZTNature-italic', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.footer-link {
  color: var(--accent);
  text-decoration: none;
  position: relative;
  transition: opacity .2s;
  cursor: pointer;
}
.footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width .25s ease;
}
.footer-link:hover { opacity: 1; }
.footer-link:hover::after { width: 100%; }
.footer-sep {
  opacity: 0.6;
}

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9998;
  backdrop-filter: blur(20px);
  background: #feffed;
  transition: background .4s ease;
  animation: slideDown .6s ease;
}
.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: .3s;
  position: relative;
}
.logo:hover {
  color: var(--accent);
  transform: translateY(-2px);
}
.logo::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: .3s;
}
.logo:hover::after { width: 100%; }

.nav { display: flex; gap: 40px; }
.nav-link {
  color: rgb(var(--text-muted));
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: .3s;
  cursor: pointer;
  position: relative;
}
.nav-link::before {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  width: 0; height: 2px;
  background: var(--accent);
  transition: .3s;
  transform: translateX(-50%);
}
.nav-link:hover::before,
.nav-link.active::before { width: 100%; }
.nav-link:hover,
.nav-link.active { color: var(--accent); }

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ══════════════════════════════════════
   PROFILE / IMPORT BUTTON
══════════════════════════════════════ */
:root {
  --profile-size: 48px;
  --icon-size: 80px;
}
.profile {
  width: var(--profile-size);
  height: var(--profile-size);
  border-radius: 50%;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--border);
  transition: .3s;
  overflow: hidden;
}
.profile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: .3s;
}
.profile:hover {
  border-color: var(--accent);
  transform: scale(1.1) rotate(5deg);
}
.profile:hover .profile-img { transform: scale(1.15); }

/* ══════════════════════════════════════
   HUB
══════════════════════════════════════ */
#hub {
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  min-height: 100vh;
}
.hub-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 0;
  transition: .3s;
}
.hub-content {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px 60px;
}

/* ── Logo hub ── */
.hub-logo-wrap {
  margin-bottom: 28px;
  animation: fadeInUp .6s ease;
}
.hub-logo-img {
  width: auto;
  height: 100px;
  object-fit: contain;
  transition: transform .4s ease;
}
.hub-logo-img:hover {
  transform: scale(1.06) rotate(-2deg);
}

.hub-title {
  font-size: 72px;
  font-weight: 900;
  margin-bottom: 20px;
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeInUp .8s ease;
}
.hub-subtitle {
  font-size: 20px;
  color: var(--text);
  margin-bottom: 60px;
  max-width: 600px;
  animation: fadeInUp 1s ease .2s backwards;
  font-family: 'ZTNature-italic', sans-serif;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  justify-content: center;
  justify-items: center;
}

/* ══════════════════════════════════════
   ÉLÉMENTS DESSINÉS À LA MAIN — HUB
══════════════════════════════════════ */
.hand-drawn-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hand-drawn-layer svg {
  position: absolute;
  overflow: visible;
}
/* Flèche courbe en haut à gauche */
.hd-arrow-tl {
  top: 18%;
  left: 4%;
  width: 140px;
  opacity: 0.55;
  animation: hdFloat 6s ease-in-out infinite;
}
/* Étoile esquissée en haut à droite */
.hd-star-tr {
  top: 14%;
  right: 5%;
  width: 80px;
  opacity: 0.45;
  animation: hdFloat 7s ease-in-out infinite reverse;
}
/* Spirale en bas à gauche */
.hd-spiral-bl {
  bottom: 14%;
  left: 6%;
  width: 100px;
  opacity: 0.4;
  animation: hdSpin 18s linear infinite;
}
/* Soulignement wavy sous le titre */
.hd-underline {
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  opacity: 0.55;
}
/* Croix esquissée en bas à droite */
.hd-cross-br {
  bottom: 18%;
  right: 6%;
  width: 70px;
  opacity: 0.45;
  animation: hdFloat 8s ease-in-out infinite 1s;
}
/* Cercle pointillé au milieu gauche */
.hd-circle-ml {
  top: 55%;
  left: 2%;
  width: 90px;
  opacity: 0.3;
  animation: hdFloat 9s ease-in-out infinite 2s;
}
/* Accolade milieu droit */
.hd-brace-mr {
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  width: 50px;
  opacity: 0.35;
  animation: hdFloat 11s ease-in-out infinite 3s;
}
/* Série de points bas centre */
.hd-dots-bc {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  opacity: 0.4;
}
/* Triangle haut centre */
.hd-triangle-tc {
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  opacity: 0.25;
  animation: hdFloat 12s ease-in-out infinite 1.5s;
}

@keyframes hdFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(2deg); }
  66%       { transform: translateY(5px) rotate(-2deg); }
}
@keyframes hdSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ══════════════════════════════════════
   ÉLÉMENTS DESSINÉS — PAGES SECTIONS
══════════════════════════════════════ */
.section-deco {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
/* coins décoratifs dans les sections */
.section-deco-tl { top: 90px; left: 20px; width: 110px; opacity: 0.35; animation: hdFloat 7s ease-in-out infinite; }
.section-deco-tr { top: 90px; right: 20px; width: 90px; opacity: 0.3; animation: hdFloat 9s ease-in-out infinite 1s; }
.section-deco-bl { bottom: 40px; left: 18px; width: 130px; opacity: 0.28; animation: hdFloat 8s ease-in-out infinite 2s; }
.section-deco-br { bottom: 40px; right: 18px; width: 80px; opacity: 0.32; animation: hdSpin 22s linear infinite; }
.section-deco-mid { top: 50%; right: 12px; transform: translateY(-50%); width: 60px; opacity: 0.25; animation: hdFloat 10s ease-in-out infinite 0.5s; }
.hub-card {
  background: var(--card-bg);
  border: none;
  border-radius: 0;
  padding: 36px 28px 28px;
  cursor: pointer;
  transition: transform .4s;
  position: relative;
  overflow: visible;
  animation: fadeInUp .6s ease backwards;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hub-card:hover {
  transform: translateY(-8px);
}
.hub-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: .4s;
}
.hub-card:hover::before { opacity: 0.05; }

.hub-icon {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hub-icon-img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.hub-card:hover .hub-icon-img { transform: scale(1.12) rotate(6deg); }

.hub-card-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  transition: .3s;
}
.hub-card:hover .hub-card-title { color: var(--accent); }
.hub-card-desc {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}
.hub-card-count {
  position: absolute;
  top: 30px; right: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.08);
  padding: 4px 12px;
  border-radius: 20px;
  transition: .3s;
}
.hub-card:hover .hub-card-count { transform: scale(1.1); }

/* ══════════════════════════════════════
   SECTIONS (polices / designers / sites / studios)
══════════════════════════════════════ */
.section-inner {
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
  padding: 130px 48px 100px;
  flex: 1;
}
.section-header {
  margin-bottom: 48px;
}
.section-title {
  font-size: 56px;
  font-weight: 900;
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  animation: fadeInUp .6s ease;
}
.section-subtitle {
  font-size: 16px;
  color: var(--text);
  opacity: 0.6;
  font-family: 'ZTNature-italic', sans-serif;
  animation: fadeInUp .6s ease .1s backwards;
}

/* ══════════════════════════════════════
   GRILLE DE CARDS — 2 carrés par ligne (comme demandé)
══════════════════════════════════════ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

/* ══════════════════════════════════════
   CARD INDIVIDUELLE — carrée
══════════════════════════════════════ */
.item-card {
  background: #feffed;
  border: none;
  border-radius: 0;
  padding: 38px 30px 30px;
  cursor: default;
  transition: transform .35s ease;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0px;
  animation: fadeInUp .5s ease backwards;
  aspect-ratio: 1 / 1;
}
.item-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
  border-radius: 0;
}
.item-card:hover {
  transform: translateY(-5px);
}
.item-card:hover::before { opacity: 0.04; }

.item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.item-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(250, 67, 57, 0);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  justify-content: center;
}

.item-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  transition: color .3s;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.item-card:hover .item-name { color: var(--accent); }

.item-desc {
  font-size: 12.5px;
  color: var(--text);
  font-family: 'ZTNature-regular', sans-serif;
  flex: 1;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

/* Ligne du bas : méta-infos */
.item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--accent-rgb),0.15);
  font-size: 11px;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.item-meta span { font-family: 'ZTNature-italic', sans-serif; }

/* NOUVELLE PRÉVISUALISATION TYPO (au-dessus du bouton, centrée, avec la police réelle) */
.preview-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 8px;
  min-height: 110px;
  position: relative;
  z-index: 1;
}
.item-sample {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-align: center;
  line-height: 1;
  opacity: 0.9;
  width: 100%;
  /* plus de position absolute : tout est maintenant à l'intérieur du cadre */
}

/* Bouton télécharger centré en bas, dans le contour */
.download-btn-centered {
  margin: 8px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 2;
}
.download-btn-centered:hover {
  transform: scale(1.18) rotate(-5deg);
  opacity: 1;
}
.download-btn-centered .download-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ancien bouton corner supprimé (remplacé par le centré) */
.download-btn-corner {
  display: none;
}

/* Lien "Visiter" pour la section Sites */
.item-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  opacity: 1;
  letter-spacing: 0.03em;
  transition: opacity .2s;
  font-family: 'ZTNature', sans-serif;
}
.item-link:hover { opacity: 0.7; }

.item-cat {
  background: rgba(var(--accent-rgb),0.07);
  border: 1px solid rgba(var(--accent-rgb),0.15);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent) !important;
  opacity: 1 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 3 colonnes desktop, 2 tablette, 1 mobile
══════════════════════════════════════ */
@media (max-width: 640px) {
  .hub-title { font-size: 36px; }
  .section-title { font-size: 32px; }
  .header-content { padding: 14px 16px; }
  .section-inner { padding: 100px 16px 80px; }
  .nav { gap: 16px; }
  .nav-link { font-size: 13px; }
  .cards-grid { grid-template-columns: 1fr; gap: 14px; }
  .hub-grid { grid-template-columns: 1fr; max-width: 300px; }
  .item-card { padding: 28px 22px; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .hub-title { font-size: 52px; }
  .section-title { font-size: 42px; }
  .header-content { padding: 16px 24px; }
  .section-inner { padding: 110px 24px 80px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hub-grid { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
  .item-card { padding: 32px 26px; }
}

@media (min-width: 1025px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ══════════════════════════════════════
   PROFILE WRAPPER + DROPDOWN
══════════════════════════════════════ */
.profile-wrapper {
  position: relative;
}

.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,50,53,0.15);
  z-index: 2000;
  overflow: hidden;
  animation: fadeInModal .2s ease;
}
.profile-dropdown.open {
  display: block;
}
.profile-dropdown-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(var(--accent-rgb),0.12);
}
.profile-dropdown-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.03em;
  font-family: 'ZTNature', sans-serif;
}
.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  background: none;
  border: none;
  font-family: 'ZTNature', sans-serif;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .2s, color .2s;
}
.profile-dropdown-item:hover {
  background: rgba(var(--accent-rgb),0.07);
  color: var(--accent);
}
.profile-dropdown-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.profile-dropdown-item:hover svg {
  opacity: 1;
}
.profile-dropdown-divider {
  height: 1px;
  background: rgba(var(--accent-rgb),0.12);
  margin: 4px 0;
}
.profile-dropdown-logout {
  color: var(--text);
  opacity: 0.55;
}
.profile-dropdown-logout:hover {
  color: var(--accent);
  opacity: 1;
}

/* ══════════════════════════════════════
   MODAL IMPORT POLICE — spécifique
══════════════════════════════════════ */
.modal-icon-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  text-align: center;
}
.modal-header-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-bottom: 4px;
}
.modal-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.font-drop-zone {
  border: 2px dashed rgba(var(--accent-rgb),0.35);
  border-radius: 14px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  margin-bottom: 20px;
  color: var(--text);
  font-size: 13px;
  opacity: 0.7;
  font-family: 'ZTNature-regular', sans-serif;
}
.font-drop-zone:hover,
.font-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),0.04);
  opacity: 1;
}
.font-drop-zone.has-file {
  border-color: var(--accent);
  opacity: 1;
  color: var(--accent);
  font-weight: 700;
}

/* ══════════════════════════════════════
   MODAL AUTH
══════════════════════════════════════ */
.auth-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,50,53,0.45);
  backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.auth-overlay.visible {
  display: flex;
  animation: fadeInModal .25s ease;
}
@keyframes fadeInModal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.auth-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 44px 36px;
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,50,53,0.18);
  animation: slideUpModal .3s ease;
}
@keyframes slideUpModal {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.auth-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity .2s;
  line-height: 1;
  padding: 4px;
}
.auth-close:hover { opacity: 1; }

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(var(--accent-rgb),0.2);
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 0 14px;
  font-family: 'ZTNature', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  opacity: 0.4;
  cursor: pointer;
  position: relative;
  transition: opacity .2s;
}
.auth-tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width .25s;
}
.auth-tab.active { opacity: 1; color: var(--accent); }
.auth-tab.active::after { width: 100%; }

.auth-welcome {
  font-size: 15px;
  color: var(--text);
  opacity: 0.7;
  margin-bottom: 24px;
  font-family: 'ZTNature-italic', sans-serif;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.auth-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.55;
}
.auth-field input {
  background: rgba(var(--accent-rgb),0.04);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: 'ZTNature-regular', sans-serif;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.auth-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12);
}

.auth-forgot {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 24px;
  opacity: 0.8;
  font-family: 'ZTNature-italic', sans-serif;
  transition: opacity .2s;
}
.auth-forgot:hover { opacity: 1; }

.auth-btn {
  width: 100%;
  padding: 13px;
  background: var(--accent);
  color: #feffed;
  border: none;
  border-radius: 12px;
  font-family: 'ZTNature', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}
.auth-btn:hover { opacity: 0.88; transform: translateY(-1px); }

.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text);
  opacity: 0.55;
  font-family: 'ZTNature-italic', sans-serif;
}
.auth-switch span {
  color: var(--accent);
  cursor: pointer;
  opacity: 1;
  font-weight: 700;
  text-decoration: underline;
}

.auth-panel.hidden { display: none; }

/* ══════════════════════════════════════
   TOAST NOTIFICATION
══════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  font-family: 'ZTNature', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 30px;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  z-index: 99999;
  pointer-events: none;
  white-space: nowrap;
}

/* ══════════════════════════════════════
   PALETTES PAR ONGLET
   Hub garde les couleurs :root de base
══════════════════════════════════════ */

/* ── Polices — Indigo électrique ── */
#fonts {
  --bg: #feffed;
  --bg-rgb: #feffed;
  --text: #0d1b5e;
  --text-muted: #0d1b5e;
  --accent: #4361EE;
  --accent-rgb: 67, 97, 238;
  --card-bg: #eef2ff;
  --border: #4361EE;
}

/* ── Designers — Ambre chaud ── */
#designers {
  --bg: #feffed;
  --bg-rgb: #feffed;
  --text: #3b1f00;
  --text-muted: #3b1f00;
  --accent: #F4882A;
  --accent-rgb: 244, 136, 42;
  --card-bg: #fff8ee;
  --border: #F4882A;
}

/* ── Sites — Vert forêt ── */
#sites {
  --bg: #feffed;
  --bg-rgb: #feffed;
  --text: #0a2d1a;
  --text-muted: #0a2d1a;
  --accent: #1DAB5F;
  --accent-rgb: 29, 171, 95;
  --card-bg: #edfaf2;
  --border: #1DAB5F;
}

/* ── Studios — Violet profond ── */
#studios {
  --bg: #feffed;
  --bg-rgb: #feffed;
  --text: #1e0a3c;
  --text-muted: #1e0a3c;
  --accent: #7C3AED;
  --accent-rgb: 124, 58, 237;
  --card-bg: #f5eeff;
  --border: #7C3AED;
}

/* Fond et couleur de texte par page */
.page {
  background: var(--bg);
  color: var(--text);
}

/* ══════════════════════════════════════
   BOUTON RETOUR EN HAUT
══════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 9000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

/* ══════════════════════════════════════
   DARK MODE
══════════════════════════════════════ */
body.dark {
  --bg: #131210;
  --text: #e8e5dc;
  --text-muted: #e8e5dc;
  --card-bg: #131210;
  --border: #FA4339;
}

/* Dark mode par onglet */
body.dark #fonts {
  --bg: #131210;
  --text: #c8d0f8;
  --text-muted: #c8d0f8;
  --accent: #4361EE;
  --accent-rgb: 67, 97, 238;
  --card-bg: #131210;
  --border: #4361EE;
}

body.dark #designers {
  --bg: #131210;
  --text: #f0dab0;
  --text-muted: #f0dab0;
  --accent: #F4882A;
  --accent-rgb: 244, 136, 42;
  --card-bg: #131210;
  --border: #F4882A;
}

body.dark #sites {
  --bg: #131210;
  --text: #b0e8c5;
  --text-muted: #b0e8c5;
  --accent: #1DAB5F;
  --accent-rgb: 29, 171, 95;
  --card-bg: #131210;
  --border: #1DAB5F;
}

body.dark #studios {
  --bg: #131210;
  --text: #d4b8f8;
  --text-muted: #d4b8f8;
  --accent: #7C3AED;
  --accent-rgb: 124, 58, 237;
  --card-bg: #131210;
  --border: #7C3AED;
}

/* Header couleur par onglet via data-page sur body */
body[data-page="fonts"]   { --bg-rgb: 238, 242, 255; --accent-rgb: 67, 97, 238; }
body[data-page="designers"] { --bg-rgb: 255, 248, 238; --accent-rgb: 244, 136, 42; }
body[data-page="sites"]     { --bg-rgb: 237, 250, 242; --accent-rgb: 29, 171, 95; }
body[data-page="studios"]   { --bg-rgb: 245, 238, 255; --accent-rgb: 124, 58, 237; }

body.dark .header { background: rgba(var(--bg-rgb), 0.9); }

body.dark { --bg-rgb: 19, 18, 16; }
body.dark[data-page="polices"]   { --bg-rgb: 13, 15, 31; }
body.dark[data-page="designers"] { --bg-rgb: 31, 18, 0; }
body.dark[data-page="sites"]     { --bg-rgb: 7, 21, 15; }
body.dark[data-page="studios"]   { --bg-rgb: 18, 8, 32; }

body.dark .auth-modal,
body.dark .profile-dropdown {
  background: #feffed;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

body.dark .auth-field input {
  background: rgba(var(--accent-rgb),0.06);
  color: var(--text);
}

body.dark .profile-dropdown-item {
  color: var(--text);
}

body.dark .auth-tab {
  color: var(--text);
}

body.dark .auth-welcome,
body.dark .auth-switch {
  color: var(--text);
}

body.dark .auth-field label {
  color: var(--text);
}

body.dark .auth-close {
  color: var(--text);
}

/* ══════════════════════════════════════
   TOGGLE SWITCH DARK MODE
══════════════════════════════════════ */
.dark-toggle {
  flex-shrink: 0;
  width: 50px;
  height: 28px;
  border-radius: 14px;
  background: rgba(250, 67, 57, 0);
  border: 2px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background .3s, border-color .3s;
  padding: 0;
}
.dark-toggle:hover {
  background: rgba(var(--accent-rgb),0.18);
}

.dark-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #feffed;
}

body.dark .dark-toggle-thumb {
  transform: translateX(22px);
  background: transparent;
}

.toggle-icon {
  position: absolute;
  transition: opacity .25s, transform .25s;
}
.toggle-sun  { opacity: 1;  transform: scale(1); }
.toggle-moon { opacity: 0;  transform: scale(0.6); }

body.dark .toggle-sun  { opacity: 0;  transform: scale(0.6); }
body.dark .toggle-moon { opacity: 1;  transform: scale(1); }

/* ══════════════════════════════════════
   BORDURES ORGANIQUES SVG
══════════════════════════════════════ */
.organic-border-svg {
  position: absolute;
  inset: -5px;
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

/* Trait secondaire (légèrement décalé) — visible en permanence */
.organic-border-svg .border-stroke-2 {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.38;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  transition: opacity .35s ease, stroke-width .35s ease;
}

/* Trait principal — visible en permanence, avec ombre SVG collée */
.organic-border-svg .border-stroke {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  transition: stroke-width .35s ease, opacity .35s ease;
}

/* Renforcement au survol */
.hub-card:hover .organic-border-svg .border-stroke,
.item-card:hover .organic-border-svg .border-stroke {
  stroke-width: 0;
  opacity: 0;
}
.hub-card:hover .organic-border-svg .border-stroke-2,
.item-card:hover .organic-border-svg .border-stroke-2 {
  stroke-width: 0.38;
  opacity: 1;
}