a{
  color: inherit;
  text-decoration: none;
}

@font-face {
  font-family: 'Nudles';
  src: url('fonts/Nudles-Hairline.woff2') format('woff2'),
       url('fonts/Nudles-Hairline.woff')  format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nudles';
  src: url('fonts/Nudles-Thin.woff2') format('woff2'),
       url('fonts/Nudles-Thin.woff')  format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nudles';
  src: url('fonts/Nudles-Regular.woff2') format('woff2'),
       url('fonts/Nudles-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nudles';
  src: url('fonts/Nudles-Bold.woff2') format('woff2'),
       url('fonts/Nudles-Bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nudles';
  src: url('fonts/Nudles-Fat.woff2') format('woff2'),
       url('fonts/Nudles-Fat.woff')  format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DMSans';
  src: url('fonts/Hershey-Noailles-Futura-Simplex-Bold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DMSans';
  src: url('fonts/Hershey-Noailles-Futura-Simplex-Bold.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DMSans';
  src: url('fonts/Hershey-Noailles-Futura-Simplex-Bold.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DMSans';
  src: url('fonts/Hershey-Noailles-Futura-Simplex-Bold.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/*
Variables globales 
*/
:root {
  --font-tag     : 'Nudles', sans-serif;
  --weight-tag   : 00;
  --weight-prompt: 700;
  --size-tag     : 17px;
  --font-title   : 'Nudles', sans-serif;
  --size-prompt  : 32px;
  --radius-tag   : 40px;
  --color-bg     : #ffffff;
  --color-text   : #1a1a1a;
}

/*
   RESET & BASE
*/
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background: #ffffff;
  font-family: 'Nudles', sans-serif;
  overflow: hidden;
  width: 100vw; height: 100vh;
}

/*
   HEADER  */
header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(to bottom, #ffffff 80%, transparent);
  pointer-events: none;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 22px 44px;
}
header > * { pointer-events: auto; }

#nav-left { display: flex; align-items: center; gap: 22px; }

.nav-btn {
  background: none; border: none; padding: 0 0 6px 0;
  font-family: 'Nudles'; 
  font-weight: 600;
  font-size: 12px; letter-spacing: 0; text-transform: uppercase;
  color: #bbb; cursor: pointer; transition: color 0.2s;
  position: relative;
}
.nav-btn:hover { color: #ff7bac; }
.nav-btn.active { color: #1a1a1a; }
.nav-btn.active::after {
  content: '';
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #ff7bac;
}

#nav-right { display: flex; align-items: center; gap: 22px; }
.view-btn {
  background: none; border: none; padding: 0 0 6px 0;
  font-family: 'Nudles';
  font-weight: 600;
  font-size: 12px; letter-spacing: 0; text-transform: uppercase;
  color: #bbb; cursor: pointer; transition: color 0.2s;
  position: relative;
}
.view-btn:hover { color: #ff7bac; }
.view-btn.active { color: #1a1a1a; }
.view-btn.active::after {
  content: '';
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #ff7bac;
}

.prompt-text {
  display: block;
  transform: translateY(-4px);
  transition: transform 0.3s ease;
}
footer.open .prompt-text { transform: translateY(0); }


@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0);   opacity: 0.4; }
  40%            { transform: translateY(-5px); opacity: 1;   }
}
.prompt-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; margin-top: 5px;
}
.prompt-dots span {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff7bac;
  font-size: 0;
  animation: dot-bounce 1.4s ease-in-out infinite;
  opacity: 0.4;
}
.prompt-dots span:nth-child(1) { animation-delay: 0s;    }
.prompt-dots span:nth-child(2) { animation-delay: 0.2s;  }
.prompt-dots span:nth-child(3) { animation-delay: 0.4s;  }
footer.open .prompt-dots { display: none; }

/*
   FOOTER  */

:root { --col-w: 220px; }

footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(to top, #ffffff 80%, transparent);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 18px;
}
footer > * { pointer-events: auto; }

footer.hidden { display: none; }

/* JEME SENS */
#footer-prompt {
  font-family: 'Nudles';
  font-weight: 550;
  font-size: 20px;
  color: #1a1a1a;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap; flex-shrink: 0;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: calc(50% - 8px);
  translate: 0 -50%;
  cursor: pointer; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
  transition: left 0.5s cubic-bezier(0.4,0,0.2,1),
              transform 0.5s cubic-bezier(0.4,0,0.2,1),
              font-size 0.4s cubic-bezier(0.4,0,0.2,1),
              width 0.5s, color 0.2s;
  pointer-events: auto;
  border: none; text-decoration: none; text-decoration-line: none; outline: none;
}
#footer-prompt:hover {
  color: #ff7bac;
  transform: translateX(-50%);
  border: none; text-decoration: none;
}
footer.open #footer-prompt {
  left: 0; width: var(--col-w);
  transform: translateX(0);
  color: #1a1a1a;
  text-align: right;
  padding-right: 18px; padding-left: 44px;
  border: none; box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  top: auto; translate: none;
}
footer.open #footer-prompt:hover {
  transform: translateX(0);
  border: none; text-decoration: none;
}

#ticker-wrapper {
  flex: 1;
  display: flex; align-items: center;
  overflow: hidden;
  opacity: 0;
  max-width: 0;
  transition: opacity 0.35s ease 0.12s, max-width 0.5s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
  padding-left: var(--col-w);
}
footer.open #ticker-wrapper {
  max-width: 100vw;
  opacity: 1;
  pointer-events: auto;
}


#ticker-viewport {
  flex: 1; overflow: hidden;
  position: relative; cursor: grab;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
  display: flex; align-items: center; justify-content: center;
}

#ticker-track {
  display: flex; align-items: center; gap: 8px;
  width: max-content; will-change: transform; padding: 0 12px;
}

#footer-controls-row {
  display: flex; align-items: center; justify-content: center;
  gap: 32px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1),
              opacity 0.3s ease 0.05s,
              padding 0.45s;
  pointer-events: none;
}
footer.open #footer-controls-row {
  max-height: 60px; opacity: 1;
  padding: 12px 0 8px;
  pointer-events: auto;
}

#footer-tag-row {
  display: flex; align-items: center;
  position: relative;
  padding: 6px 0 0;
  min-height: 42px;
}

/*
   BOUTONS ICÔNES DU FOOTER
*/
.icon-btn {
  -webkit-appearance: none; appearance: none;
  background: none; border: 1.5px solid transparent; outline: none;
  border-radius: 8px; padding: 7px;
  cursor: pointer; color: #bbb;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: #ff7bac; }
.icon-btn.active { color: #1a1a1a; }
.icon-btn svg { display: block; }

.icon-pair {
  display: flex; align-items: center;
  gap: 8px;
  border: none;
}

.icon-pair .icon-btn {
  border: none; border-radius: 0;
  padding: 6px 2px;
  padding-bottom: 16px;
  position: relative;
  height: 54px;
  display: flex; align-items: flex-start; justify-content: center;
}
.icon-btn .svg-gris { display: block; }
.icon-btn .svg-rose { display: none;  }
.icon-btn .svg-noir { display: none;  }

.icon-btn:hover .svg-gris { display: none;  }
.icon-btn:hover .svg-rose { display: block; }
.icon-btn:hover .svg-noir { display: none;  }

.icon-btn.active .svg-gris { display: none;  }
.icon-btn.active .svg-rose { display: none;  }
.icon-btn.active .svg-noir { display: block; }

.icon-btn.active:hover .svg-gris { display: none;  }
.icon-btn.active:hover .svg-rose { display: none;  }
.icon-btn.active:hover .svg-noir { display: block; }

.icon-pair .icon-btn::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff7bac;
  opacity: 0; transition: opacity 0.18s;
}
.icon-pair .icon-btn.active { color: #1a1a1a; background: none; }
.icon-pair .icon-btn.active::after { opacity: 1; }
.icon-pair .icon-btn:not(.active):hover {
  color: #ff7bac; background: none;
}

#footer-add {
  flex-shrink: 0;
  width: var(--col-w);
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 44px 0 18px;
  box-sizing: border-box;
  max-width: 0; overflow: hidden; opacity: 0;
  transition: opacity 0.35s ease 0.12s, max-width 0.5s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
footer.open #footer-add { max-width: var(--col-w); opacity: 1; pointer-events: auto; }

/* 
   PAGE À PROPOS */

.tag-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.tag-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  background: transparent;
  border: none;
  border-radius: 40px;
  border: 1.5px solid transparent;
  border-radius: 40px;
  font-family: var(--font-tag);
  font-weight: var(--weight-tag);
  font-size: var(--size-tag);
  letter-spacing: 0;
  cursor: pointer;
  color: #1a1a1a;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.tag-btn::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.tag-btn:hover::before  { transform: scale(1.3); }
.tag-btn.active::before { transform: scale(1.15); }

.tag-btn:hover {
  color: var(--color-text);
  border-color: var(--c);
  border-style: dotted;
}

.tag-btn.active {
  border-style: solid;
  border-color: var(--c);
  color: var(--color-text);
}

.tag-btn.active:hover {
  border-style: solid;
  border-color: var(--c);
}

.all-btn.active {
  background: var(--color-text);
  color: #ffffff;
  border-color: var(--color-text);
}

.tag-delete {
  display: none;
  font-size: 20px; line-height: 1;
  color: #000; cursor: pointer;
  font-family: 'DMSans';
  font-weight: 600;
  transform: rotate(45deg);
  transition: color 0.15s;
  order: -1;
  margin-right: 1px;
}

.tag-btn:has(.tag-delete):hover::before { display: none; }
.tag-btn:hover .tag-delete { display: inline; }
.tag-delete:hover { color: var(--c); }

/* ─────────────────────────────────────────────
   BOUTON + (ajouter une photo)
   Petit cercle à droite de la barre de tags
   ───────────────────────────────────────────── */
.add-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.06);
  background:  rgba(0,0,0,0.06);
  font-family: 'DMSans';
  font-weight: 600;  
  font-size: 20px; line-height: 1; cursor: pointer; color: #000000;
  transition: all 0.2s; flex-shrink: 0;
}
.add-btn:hover { background: #ff7bac; color: #ffffff; border-color: #ff7bac; }

#clear-btn {
  -webkit-appearance: none; appearance: none;
  background: none; border: none; outline: none;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  width: 0; overflow: hidden; opacity: 0; flex-shrink: 0;
  font-family: 'DMSans';
  font-weight: 600;
  font-size: 20px; line-height: 1;
  color: #000000;
  transform: rotate(45deg);
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1),
              opacity 0.25s ease,
              margin-right 0.3s cubic-bezier(0.4,0,0.2,1),
              color 0.18s;
  margin-right: 0;
}
#clear-btn.visible {
  width: 28px;
  opacity: 1;
  margin-right: 8px;
}
#clear-btn:hover { color: #ff7bac; }

/*GALERIE / stage */
#stage { position: absolute; inset: 0; transition: opacity 0.3s ease; }

#overlay-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

.photo-item {
  position: absolute;
  z-index: 10; cursor: grab; user-select: none;
  transition: opacity 0.35s ease;
  will-change: left, top;
}
.photo-item:active { cursor: grabbing; z-index: 50; }

.photo-item.dimmed {
  opacity: 0;
  pointer-events: none;
}

.photo-item.hidden-img img { opacity: 0; }

.photo-item img {
  width: 100%; height: 100%;
  object-fit: fill; display: block;
  pointer-events: none; -webkit-user-drag: none;
  transition: opacity 0.4s;
}

/* INFOS*/
#about-page {
  display: none;
  position: fixed; inset: 0;
  background: #ffffff;
  z-index: 50;
}
#about-page.visible { display: block; }

#about-content {
  position: absolute;
  top: 80px; right: 44px;
  width: min(680px, 60vw);
  display: grid;
  grid-template-columns: 38% 58%;
  gap: 0 24px;
}

#about-left {
  text-align: center;
  padding-top: 8px;
}
#about-left .pink {
  font-family: 'DMSans', sans-serif;
  font-size: 16px; color: #ff7bac; line-height: 1.3;
}
#about-left .black {
  font-family: 'DMSans', sans-serif;
  font-size: 16px; color: #1a1a1a; line-height: 1.3;
}

#about-right { }
#about-right p {
  font-family: 'DMSans', sans-serif;
  font-size: 14px; line-height: 1.4;
  color: #1a1a1a; text-align: justify;
}
#about-right p + p { margin-top: 18px; }
#about-right .qm {
  font-family: 'Nudles', sans-serif;
  text-transform: uppercase;
}
#about-right .credits {
  font-family: 'DMSans', sans-serif;
  font-size: 14px; color: #bbb; line-height: 1.4;
  margin-top: 28px; text-align: justify;
}
#about-right .credits .qm {
  font-family: 'Nudles', sans-serif;
  font-size: 14px; text-transform: uppercase;
}

#about-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 16px;
  margin-top: 20px;
}
#about-author {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Nudles', sans-serif;
  font-size: 15px; color: #1a1a1a;
}
#about-author::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff7bac;
}
#about-diploma {
  font-family: 'DMSans', sans-serif;
  font-size: 11px; color: #bbb;
  text-transform: uppercase; letter-spacing: .04em;
}

/* AJOUT PHOTOS / modale */
#modal-overlay {
  display: none; position: fixed; inset: 0;
  backdrop-filter: blur(1px);
  z-index: 9999; align-items: center; justify-content: center;
}
#modal-overlay.open { display: flex; }

#modal {
  background: #ffffff;
  border-radius: 20px;
  width: min(780px, 96vw);
  height: min(560px, 92vh);
  position: relative;
  display: grid;
  grid-template-columns: 40% 60%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.06);
}
#modal h2 { display: none; }

.modal-close {
  position: absolute; top: 14px; right: 16px; z-index: 10;
  background: rgba(0,0,0,0.06); border: none;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 13px; color: #888; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.modal-close:hover { background: #ff7bac; color: #fff; }

.modal-label {
  font-size: 13px; letter-spacing: .02em; text-transform: uppercase;
  color: #bbb; margin-bottom: 12px; display: block; font-weight: 600;
  font-family: 'DMSans', sans-serif;
}

#modal-left {
  background: #ffffff;
  border-radius: 20px 0 0 20px;
  border-right: 2px dotted rgba(0,0,0,0.1);
  padding: 32px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
}

#modal-right {
  padding: 32px 28px 24px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}

#upload-zone {
  flex: 1; min-height: 240px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.06); border-radius: 14px;
  text-align: center; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  transition: border-color 0.18s, color 0.18s; color: #bbbbbb; background:  rgba(0,0,0,0.06);
  font-family: 'DMSans';
  font-weight: 600;  
  font-size: 20px;
  outline: none;
  overflow: hidden;
}
#upload-zone:hover {
  border-color: #ff7bac;
  color: #ffffff;
   background:  #ff7bac;
}
#upload-zone.has-img { padding: 0; }
#upload-zone img { width: 100%; height: 100%; object-fit: cover; display: block; }
#file-input { display: none; }

#modal-date-wrap { flex-shrink: 0; }
#modal-date {
  width: 100%; padding: 9px 14px;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 10px;
  background: #fff; font-family: 'DMSans', sans-serif;
  font-size: 13px; color: #1a1a1a; outline: none;
  transition: border-color 0.18s;
}
#modal-date::placeholder { color: #ccc; }
#modal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; flex: 1; }
.modal-tag {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 40px;
  box-shadow: none;
  font-family: var(--font-tag);
  font-weight: var(--weight-tag);
  font-size: var(--size-tag);
  letter-spacing: 0;
  cursor: pointer; color: #1a1a1a;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.modal-tag::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); flex-shrink: 0;
  transition: transform 0.18s ease;
}
.modal-tag:hover::before  { transform: scale(1.3); }
.modal-tag.selected::before { transform: scale(1.15); }
.modal-tag:hover   { color: var(--color-text); border-color: var(--c); border-style: dotted; }
.modal-tag.selected { color: var(--color-text); border-style: solid; border-color: var(--c); }
.modal-tag.selected:hover { border-style: solid; border-color: var(--c); }

#new-tag-row { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
#new-tag-input {
  flex: 1; padding: 8px 12px;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 10px;
  background: transparent; font-family: 'Nudles', sans-serif;
  font-size: 16px; color: #1a1a1a; outline: none;
  transition: border-color 0.18s;
}
#new-tag-input::placeholder { color: #ccc; }
#new-tag-color {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0; background: none; overflow: hidden;
}
#add-tag-btn {
  padding: 8px 16px; border: 1px solid rgba(0,0,0,0.12); border-radius: 40px;
  background: transparent; color: #aaa;
  font-family: 'DMSans', sans-serif; font-size: 14px;
  cursor: pointer; transition: all 0.2s; white-space: nowrap; flex-shrink: 0;
}
#add-tag-btn:hover { background: #ff7bac; color: #fff; border-color: #ff7bac; }

#modal-submit {
  width: 100%; padding: 8px; border: 1px solid rgba(0,0,0,0.1); border-radius: 40px;
  background: #ccc; color: #fff;
  font-family: 'DMSans', sans-serif; font-size: 14px;
  text-transform: lowercase; cursor: pointer; transition: background 0.22s; margin-top: auto;
}
#modal-submit:not(:disabled):hover { background: #ff7bac; }
#modal-submit:not(:disabled) { background: #ccc; }
#modal-submit:disabled { background: #ffffff; color: #aaa; }

/* 
   INDEX PAGE  */

#index-page {
  display: none;
  position: fixed; inset: 0;
  background: #ffffff;
  z-index: 50;
  overflow: hidden;
}
#index-page.visible { display: block; }

/* 
   IMAGE D'APERÇU  */
#index-preview {
  position: fixed;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 55;
}
#index-preview.visible { opacity: 1; }

#index-preview img {
  max-width: 36vw;
  max-height: 60vh;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}

/* 
   LISTE */
#index-list {
  position: absolute;
  top: 110px;
  bottom: 0; right: 0;
  width: 42%;
  overflow-y: auto;
  padding: 0 22px 60px 0;
  scrollbar-width: none;
}
#index-list::-webkit-scrollbar { display: none; }

/*EN-TÊTE DES COLONNES*/
#index-sort-bar {
  position: absolute;
  top: 70px;
  right: 0;
  width: 42%;
  display: grid;
  grid-template-columns: 40px 1fr 66px;
  gap: 0 20px;
  align-items: center;
  padding: 8px 44px 12px 0;
  border-bottom: none;
  background: #ffffff;
  z-index: 2;
}

.sort-head {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background: transparent; border: none; outline: none;
  box-shadow: none; border-radius: 0; padding: 0; margin: 0;
  font-family: 'DMSans', sans-serif;
  font-size: 12px;
  color: #bbb;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s;
}
.sort-head:hover { color: #ff7bac; }
.sort-head.active { color: #1a1a1a; }


.index-row {
  display: grid;
  grid-template-columns: 40px 1fr 66px;
  align-items: center;
  gap: 0 20px;
  padding: 10px 0;
  border-bottom: none;
  cursor: pointer;
  position: relative;
  transition: opacity 0.18s ease;
}

#index-list:has(.index-row:hover) .index-row:not(:hover) {
  opacity: 0.3;
}


.index-num {
  font-family: 'DMSans', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #000000;
  user-select: none;
  text-align: right;
}


.index-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: center;
  overflow: hidden;
}

.index-tag-dot {
  display: flex; align-items: center; gap: 4px;
  font-family: 'Nudles', sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color: #1a1a1a;
  white-space: nowrap;
}
.index-tag-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
}

.index-date {
  font-family: 'DMSans', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #000000;
  white-space: nowrap;
}

/*
   BOUTONS DE TRI  */
.sort-btn {
  background: none; border: none;
  padding: 2px 0 4px 0;
  font-family: 'DMSans', monospace;
  font-size: 9px; letter-spacing: 0; text-transform: uppercase;
  color: #bbb; cursor: pointer;
  transition: color 0.2s;
  position: relative; white-space: nowrap;
}
.sort-btn:hover { color: #888; }
.sort-btn.active { color: #1a1a1a; }

.sort-btn.active::after {
  content: attr(data-arrow);
  margin-left: 3px; font-size: 9px;
}

.sort-sep {
  font-family: 'DMSans', monospace;
  font-size: 9px; color: rgba(0,0,0,0.12);
  user-select: none;
}

/*
  APERÇU */
#lightbox {
  display: none;
  position: fixed; inset: 0;
  z-index: 300;
  align-items: center; justify-content: center;
}
#lightbox.open { display: flex; }

#lb-bg {
  position: absolute; inset: 0;
  backdrop-filter: blur(1px);
  pointer-events: none;
}

#lb-zone-prev, #lb-zone-next {
  position: absolute; z-index: 4;
  top: 12%; bottom: 12%;
  width: 50%;
}
#lb-zone-prev { left: 0;  cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDMyIDIyLjQyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMjYxZjFjOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNOC4zNyw3LjdjLjcyLjI1LDEuMzUuNTMsMS44OC44NC40Mi4yMi43Ny4zOCwxLjA0LjQ2LjI4LjA4LjY0LjEzLDEuMDkuMTMuNjQsMCwxLjE5LS4wNywxLjYzLS4yMS40NS0uMTQsMS0uMzYsMS42Ny0uNjcuODktLjQyLDEuNzYtLjc1LDIuNTktLjk4czEuOTItLjM2LDMuMjYtLjM2Yy45NSwwLDEuOC4wNywyLjU1LjIxczEuNzMuMzYsMi45My42N2MuNzguMjIsMS40LjM4LDEuODYuNDYuNDYuMDguOS4xMSwxLjMyLjA4LjQ3LS4wNi44OS4wOCwxLjI2LjQyLjM2LjM0LjU0Ljc1LjU0LDEuMjYsMCwuNDUtLjE1LjgyLS40NCwxLjEzLS4yOS4zMS0uNjYuNDktMS4xMS41NC0uNy4wNi0xLjQuMDItMi4xMS0uMTEtLjcxLS4xMy0xLjYtLjMzLTIuNjYtLjYxLS4xNy0uMDMtLjQ5LS4xMS0uOTYtLjIzLS40Ny0uMTItLjk4LS4yMy0xLjUzLS4zMy0uNTQtLjEtMS4wOS0uMTUtMS42NS0uMTUtLjY0LDAtMS4xOS4wNy0xLjYzLjIxcy0xLC4zNi0xLjY3LjY3Yy0uODkuNDItMS43Ni43NS0yLjU5Ljk4cy0xLjkyLjM1LTMuMjYuMzVjLS45OCwwLTEuNzgtLjEtMi40LS4zMXMtMS4yMy0uNS0xLjgyLS44NmMtLjQyLS4yNS0uNjgtLjM5LS43OS0uNDItLjMzLS4xMS0uNjEtLjMxLS44NC0uNjEtLjIyLS4yOS0uMzMtLjYyLS4zMy0uOTgsMC0uNDcuMTYtLjg3LjQ4LTEuMTkuMzItLjMyLjcyLS40OCwxLjE5LS40OC4xMSwwLC4yOC4wMy41LjA4Wk0uNjMsOC4zMmMuNTMtLjQyLjk5LS44OCwxLjM4LTEuMzguMzktLjUuODQtMS4xMywxLjM0LTEuODguODEtMS4yMywxLjU4LTIuMjEsMi4zMi0yLjk1Ljc0LS43NCwxLjc5LTEuMzUsMy4xNi0xLjgyQzkuMzguMSwxMC4xOCwwLDExLjIxLDBsMS41OS4wNGMuMjIuMDMuNTMuMDQuOTIuMDQuNDUsMCwuODQuMTYsMS4xNy40OC4zNC4zMi41LjcyLjUsMS4xOSwwLC40NS0uMTcuODQtLjUsMS4xNy0uMzMuMzQtLjcyLjUtMS4xNy41bC0xLjM0LS4wNGMtLjI4LS4wMy0uNzEtLjA0LTEuMy0uMDRzLS45OC4wNC0xLjE3LjEzYy0uNzguMjgtMS4zNy42Mi0xLjc4LDEuMDMtLjQuNC0uODQsMS0xLjMyLDEuNzgtLjYxLjkyLTEuMTksMS43Mi0xLjc0LDIuMzgtLjU0LjY3LTEuMzMsMS40Mi0yLjM2LDIuMjYtLjMxLjI1LS42Ni4zOC0xLjA1LjM4LS40NywwLS44Ny0uMTctMS4xOS0uNUMuMTYsMTAuNDYsMCwxMC4wNywwLDkuNjJjMC0uNTMuMjEtLjk2LjYzLTEuM1pNNS45LDEyLjc2Yy4yNS4wOC43Ny4xNSwxLjU1LjIxLjkyLjA2LDEuNzQuMTYsMi40NS4zMS43MS4xNSwxLjM5LjQ1LDIuMDMuOS44OS42NCwxLjU0LDEuNTgsMS45NCwyLjgyLjQxLDEuMjQuNjEsMi4zOS42MSwzLjQ1di41NGMtLjA2LjM5LS4yNC43Mi0uNTcsMS0uMzIuMjgtLjY5LjQyLTEuMTEuNDItLjUsMC0uOTItLjItMS4yNi0uNTktLjMzLS4zOS0uNDctLjg0LS40Mi0xLjM0LjA4LS40Mi4wMi0xLjA0LS4xOS0xLjg2LS4yMS0uODItLjUyLTEuMzktLjk0LTEuNjktLjI1LS4xNy0uNTUtLjI5LS45LS4zNi0uMzUtLjA3LS44My0uMTMtMS40NC0uMTktMS4xNC0uMDYtMi4wOS0uMjEtMi44NC0uNDYtLjMzLS4xMS0uNjEtLjMxLS44Mi0uNjEtLjIxLS4yOS0uMzEtLjYyLS4zMS0uOTgsMC0uNDcuMTYtLjg3LjQ4LTEuMTkuMzItLjMyLjcyLS40OCwxLjE5LS40OC4xNCwwLC4zMi4wMy41NC4wOVoiLz4KICA8L2c+Cjwvc3ZnPg==") 16 11, w-resize; }
#lb-zone-next { right: 0; cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDMyIDIyLjQyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMjYxZjFjOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjQuMTMsNy42MWMuNDcsMCwuODcuMTYsMS4xOS40OC4zMi4zMi40OC43Mi40OCwxLjE5LDAsLjM2LS4xMS42OS0uMzMuOTgtLjIyLjI5LS41LjUtLjg0LjYxLS4xMS4wMy0uMzguMTctLjc5LjQyLS41OS4zNi0xLjE5LjY1LTEuODIuODZzLTEuNDMuMzEtMi40LjMxYy0xLjM0LDAtMi40My0uMTItMy4yNi0uMzVzLTEuNy0uNTctMi41OS0uOThjLS42Ny0uMzEtMS4yMy0uNTMtMS42Ny0uNjdzLS45OS0uMjEtMS42My0uMjFjLS41NiwwLTEuMTEuMDUtMS42NS4xNS0uNTQuMS0xLjA1LjIxLTEuNTMuMzMtLjQ3LjEzLS43OS4yLS45Ni4yMy0xLjA2LjI4LTEuOTQuNDgtMi42Ni42MS0uNzEuMTMtMS40Mi4xNi0yLjExLjExLS40NS0uMDYtLjgyLS4yNC0xLjExLS41NC0uMjktLjMxLS40NC0uNjgtLjQ0LTEuMTMsMC0uNS4xOC0uOTIuNTQtMS4yNi4zNi0uMzMuNzgtLjQ3LDEuMjYtLjQyLjQyLjAzLjg2LDAsMS4zMi0uMDguNDYtLjA4LDEuMDgtLjI0LDEuODYtLjQ2LDEuMi0uMzEsMi4xNy0uNTMsMi45My0uNjdzMS42LS4yMSwyLjU1LS4yMWMxLjM0LDAsMi40My4xMiwzLjI2LjM2czEuNy41NiwyLjU5Ljk4Yy42Ny4zMSwxLjIzLjUzLDEuNjcuNjcuNDUuMTQuOTkuMjEsMS42My4yMS40NSwwLC44MS0uMDQsMS4wOS0uMTMuMjgtLjA4LjYzLS4yNCwxLjA0LS40Ni41My0uMzEsMS4xNi0uNTksMS44OC0uODQuMjItLjA2LjM5LS4wOC41LS4wOFpNMzIsOS42MmMwLC40NS0uMTYuODQtLjQ4LDEuMTctLjMyLjMzLS43Mi41LTEuMTkuNS0uMzksMC0uNzQtLjEzLTEuMDUtLjM4LTEuMDMtLjg0LTEuODItMS41OS0yLjM2LTIuMjYtLjU0LS42Ny0xLjEyLTEuNDYtMS43NC0yLjM4LS40Ny0uNzgtLjkxLTEuMzctMS4zMi0xLjc4LS40MS0uNC0xLS43NS0xLjc4LTEuMDMtLjItLjA4LS41OS0uMTMtMS4xNy0uMTNzLTEuMDIuMDEtMS4zLjA0bC0xLjM0LjA0Yy0uNDUsMC0uODQtLjE3LTEuMTctLjUtLjM0LS4zMy0uNS0uNzItLjUtMS4xNywwLS40Ny4xNy0uODcuNS0xLjE5LjMzLS4zMi43Mi0uNDgsMS4xNy0uNDguMzksMCwuNy0uMDEuOTItLjA0bDEuNTktLjA0YzEuMDMsMCwxLjgzLjEsMi4zOC4yOSwxLjM3LjQ3LDIuNDIsMS4wOCwzLjE2LDEuODIuNzQuNzQsMS41MSwxLjcyLDIuMzIsMi45NS41Ljc1Ljk1LDEuMzgsMS4zNCwxLjg4LjM5LjUuODUuOTYsMS4zOCwxLjM4LjQyLjMzLjYzLjc3LjYzLDEuM1pNMjYuNjQsMTIuNjdjLjQ3LDAsLjg3LjE2LDEuMTkuNDguMzIuMzIuNDguNzIuNDgsMS4xOSwwLC4zNi0uMTEuNjktLjMxLjk4LS4yMS4yOS0uNDguNS0uODIuNjEtLjc1LjI1LTEuNy40MS0yLjg0LjQ2LS42MS4wNi0xLjA5LjEyLTEuNDQuMTktLjM1LjA3LS42NS4xOS0uOS4zNi0uNDIuMzEtLjczLjg3LS45NCwxLjY5LS4yMS44Mi0uMjcsMS40NC0uMTksMS44Ni4wNi41LS4wOC45NS0uNDIsMS4zNC0uMzMuMzktLjc1LjU5LTEuMjYuNTktLjQyLDAtLjc5LS4xNC0xLjExLS40Mi0uMzItLjI4LS41MS0uNjEtLjU3LTF2LS41NGMwLTEuMDYuMi0yLjIxLjYxLTMuNDUuNC0xLjI0LDEuMDUtMi4xOCwxLjk0LTIuODIuNjQtLjQ1LDEuMzItLjc1LDIuMDMtLjkuNzEtLjE1LDEuNTMtLjI2LDIuNDUtLjMxLjc4LS4wNSwxLjMtLjEyLDEuNTUtLjIxLjIyLS4wNi40LS4wOS41NC0uMDlaIi8+CiAgPC9nPgo8L3N2Zz4=") 16 11, e-resize; }

#lb-zone-close-top, #lb-zone-close-bot {
  position: absolute; z-index: 4;
  left: 0; right: 0; height: 12%;
  cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIyLjQxIDIzLjExIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMjYxZjFjOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMS44NSwyMy4xMWMtLjQ5LDAtLjkyLS4xOC0xLjI5LS41NS0uMzctLjM3LS41NS0uOC0uNTUtMS4yOSwwLS40Ni4xNC0uODUuNDItMS4xNSwxLjQyLTEuNzYsMy41Ny00LjEzLDYuNDUtNy4xMiwyLjg4LTIuOTksNi40LTYuNTMsMTAuNTYtMTAuNjNsMS44LTEuOGMuNDMtLjM3Ljg4LS41NSwxLjM0LS41NS41MiwwLC45Ni4xOCwxLjMyLjUzLjM1LjM1LjUzLjc5LjUzLDEuMzJzLS4xOC45Ny0uNTUsMS4zNGwtMS44NSwxLjhDMTAuODYsMTQuMDUsNS4yOCwxOS44NCwzLjI4LDIyLjM3Yy0uMzQuNDktLjgyLjc0LTEuNDMuNzRaTTIxLjU4LDE4LjM1YzAsLjQ5LS4xOC45Mi0uNTMsMS4yOXMtLjc5LjU1LTEuMzIuNTVjLS41NSwwLTEtLjItMS4zNC0uNi0xLjI5LTEuNDItMy4zMi0zLjU0LTYuMDgtNi4zOC0yLjc2LTIuODQtNS4zMi01LjQ0LTcuNy03LjgxLS4zNy0uNDMtLjU1LS44OC0uNTUtMS4zNCwwLS41Mi4xOS0uOTYuNTUtMS4zMi4zNy0uMzUuOC0uNTMsMS4yOS0uNTMuNTIsMCwuOTcuMTgsMS4zNC41NSw2LjgxLDYuODcsMTEuNDMsMTEuNjUsMTMuODcsMTQuMzMuMzEuMzcuNDYuNzkuNDYsMS4yNVoiLz4KICA8L2c+Cjwvc3ZnPg==") 16 16, crosshair;
}
#lb-zone-close-top { top: 0; }
#lb-zone-close-bot { bottom: 0; }

#lb-img {
  position: relative; z-index: 1;
  max-width: 78vw; max-height: 76vh;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

#lb-tags   { display: none; }
#lb-counter { display: none; }

.lb-arrow { display: none; }

#lb-delete {
  display: none;
  position: absolute; z-index: 5;
  bottom: 5%; left: 50%; transform: translateX(-50%);
  padding: 8px 16px; border: 1px solid rgba(0,0,0,0.12); border-radius: 40px;
  background-color:#fff; color: #aaa;
  font-family: 'DMSans', sans-serif; font-size: 14px;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
#lb-delete:hover { background: #ff7bac; color: #fff; border-color: #ff7bac; }
#lb-delete.visible { display: block; }

.tag-btn,
.modal-tag,
.lb-tag,
.index-tag-dot {
  font-family: 'Nudles', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

/* POPUP D'ACCUEIL */
#welcome-overlay {
  display: flex; position: fixed; inset: 0;
  backdrop-filter: blur(1px);
  z-index: 99999;
  align-items: center; justify-content: center;
}
#welcome-modal {
  background: #ffffff;
  border-radius: 20px;
  width: min(780px, 96vw);
  height: min(560px, 92vh);
  display: grid;
  grid-template-columns: 40% 60%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.06);
}

#welcome-left {
  background: #ffffff;
  border-radius: 20px 0 0 20px;
  border-right: 2px dotted rgba(0,0,0,0.1);
  padding: 44px 36px;
  display: flex; flex-direction: column; justify-content: space-between;

}

#welcome-left a:hover{
  color: #ff7bac;
  transition: all 0.2s;
}
#welcome-title {
  font-family: 'Nudles', sans-serif; font-weight: 700;
  font-size: 25px; color: #1a1a1a; line-height: 1.1; text-transform: uppercase;
}
#welcome-quote {
  text-align: center; margin-top: 28px;
}
#welcome-quote .pink {
  font-family: 'DMSans', sans-serif; font-size: 16px;
  color: #ff7bac; line-height: 1.6;
}
#welcome-quote .black {
  font-family: 'DMSans', sans-serif; font-size: 16px;
  color: #1a1a1a; line-height: 1.6;
}
#welcome-moderation {
  font-family: 'DMSans', sans-serif; font-size: 14px;
  color: #1a1a1a; line-height: 1.6;
}
#welcome-moderation .qm {
  font-family: 'Nudles', sans-serif; font-size: 14px;
  text-transform: uppercase;
}

#welcome-right {
  padding: 44px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
}
#welcome-text {
  font-family: 'DMSans', sans-serif; font-size: 15px;
  color: #1a1a1a; line-height: 1.5; text-align: justify;
}
#welcome-text p { margin-bottom: 18px; }
#welcome-text p:last-child { margin-bottom: 0; }
#welcome-text .qm {
  font-family: 'Nudles', sans-serif;
  text-transform: uppercase;
}
#welcome-enter {
  -webkit-appearance: none; appearance: none;
  width: auto; padding: 10px 30px; border: none; border-radius: 40px;
  background: #ff7bac; color: #ffffff;
  font-family: 'DMSans', sans-serif; font-size: 17px;
  text-transform: lowercase; cursor: pointer; transition: background .22s;
  margin-top: 28px; align-self: center;
}
#welcome-enter:hover { background: #000000; }