html.tet-lightbox-open,
body.tet-lightbox-open {
  overflow: hidden;
}

/* =========================================
   Grille des vignettes
========================================= */

.tet-lightbox-item {
  display: block;
}

.tet-lightbox-thumb-wrap {
  position: relative;
}

.tet-lightbox-trigger {
  display: block;
  text-decoration: none;
  line-height: 0;
}

.tet-lightbox-trigger img {
  display: block;
  width: 100%;
  height: auto;
}

.tet-lightbox-thumb-title {
  margin-top: 6px;
  min-height: 2.4em;
  font-family: 'EB Garamond', serif;
  font-size: 0.92rem;
  line-height: 1.15;
  font-weight: 400;
  color: #2b2b2b;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.tet-lightbox-comment-source {
  display: none;
}

/* bouton modifier sur la vignette */
.tet-lightbox-edit-link {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s ease;
}

.tet-lightbox-edit-link:hover {
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
}

/* =========================================
   Overlay lightbox
========================================= */

.tet-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.tet-lightbox.is-open {
  display: block;
}

.tet-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
}

.tet-lightbox__dialog {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  margin: 20px auto;
  display: flex;
  flex-direction: column;
}

.tet-lightbox__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: transparent;
}

.tet-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  width: auto;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* =========================================
   Métadonnées
========================================= */

.tet-lightbox__meta {
  margin-top: 14px;
  padding: 0 8px;
  color: #ffffff;
  text-align: left;
}

.tet-lightbox__counter {
  margin-bottom: 8px;
  font-size: 0.9rem;
  line-height: 1.2;
  opacity: 0.8;
  color: #ffffff;
}

.tet-lightbox__title {
  font-family: 'Libre Bodoni', serif;
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 400;
  margin-bottom: 8px;
  color: #ffffff;
}

/* =========================================
   Commentaires : version robuste anti Word / OpenOffice
========================================= */

.tet-lightbox__comment {
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  line-height: 1.4;
  max-width: 900px;
  color: #ffffff !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal !important;
}

/* Reset large du HTML collé depuis Word / LibreOffice */
.tet-lightbox__comment,
.tet-lightbox__comment * {
  box-sizing: border-box;
  max-width: 100% !important;
}

.tet-lightbox__comment,
.tet-lightbox__comment p,
.tet-lightbox__comment span,
.tet-lightbox__comment strong,
.tet-lightbox__comment em,
.tet-lightbox__comment li,
.tet-lightbox__comment ul,
.tet-lightbox__comment ol,
.tet-lightbox__comment div,
.tet-lightbox__comment blockquote,
.tet-lightbox__comment figcaption,
.tet-lightbox__comment h1,
.tet-lightbox__comment h2,
.tet-lightbox__comment h3,
.tet-lightbox__comment h4,
.tet-lightbox__comment h5,
.tet-lightbox__comment h6,
.tet-lightbox__comment font {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  white-space: normal !important;
  text-indent: 0 !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Paragraphes / blocs */
.tet-lightbox__comment p,
.tet-lightbox__comment div,
.tet-lightbox__comment blockquote,
.tet-lightbox__comment li {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.tet-lightbox__comment p:last-child,
.tet-lightbox__comment div:last-child,
.tet-lightbox__comment blockquote:last-child {
  margin-bottom: 0 !important;
}

/* Listes */
.tet-lightbox__comment ul,
.tet-lightbox__comment ol {
  margin: 0 0 10px 22px !important;
  padding: 0 !important;
}

/* Liens */
.tet-lightbox__comment a,
.tet-lightbox__comment a:visited,
.tet-lightbox__comment a:hover,
.tet-lightbox__comment a:focus {
  color: #ffffff !important;
  text-decoration: underline;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Si Henri colle du HTML ultra sale avec styles inline */
.tet-lightbox__comment [style] {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* Images dans les commentaires */
.tet-lightbox__comment img {
  display: block;
  max-width: 300px !important;
  width: auto !important;
  height: auto !important;
  margin: 12px 0;
  border-radius: 4px;
}

/* Figures éventuelles */
.tet-lightbox__comment figure {
  display: block;
  max-width: 100% !important;
  margin: 12px 0 !important;
}

.tet-lightbox__comment figure img {
  max-width: 300px !important;
}

.tet-lightbox__comment figcaption {
  margin-top: 6px;
  font-size: 0.95em;
  line-height: 1.3;
  color: #ffffff !important;
}

/* Tableaux collés depuis Word */
.tet-lightbox__comment table {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse;
  overflow-x: auto;
}

.tet-lightbox__comment td,
.tet-lightbox__comment th {
  color: #ffffff !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  white-space: normal !important;
}

/* Alignements éventuels issus de l’éditeur */
.tet-lightbox__comment .align-left {
  float: left;
  margin: 8px 16px 8px 0;
}

.tet-lightbox__comment .align-right {
  float: right;
  margin: 8px 0 8px 16px;
}

.tet-lightbox__comment::after {
  content: "";
  display: block;
  clear: both;
}

/* =========================================
   Boutons
========================================= */

.tet-lightbox__close {
  position: absolute;
  top: -8px;
  right: -4px;
  z-index: 100003;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.tet-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 100002;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.tet-lightbox__prev {
  left: 12px;
}

.tet-lightbox__next {
  right: 12px;
}

.tet-lightbox__close:hover,
.tet-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.22);
}

.tet-lightbox__nav.is-hidden {
  display: none !important;
}

/* =========================================
   Responsive
========================================= */

@media (max-width: 900px) {
  .tet-lightbox__dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    margin: 10px auto;
  }

  .tet-lightbox__image {
    max-height: calc(100vh - 260px);
  }

  .tet-lightbox__title {
    font-size: 1.15rem;
  }

  .tet-lightbox__comment {
    font-size: 0.95rem;
    line-height: 1.32;
  }

  .tet-lightbox__comment img,
  .tet-lightbox__comment figure img {
    max-width: min(300px, 100%) !important;
  }

  .tet-lightbox__prev {
    left: 8px;
  }

  .tet-lightbox__next {
    right: 8px;
  }

  .tet-lightbox__nav {
    width: 56px;
    height: 56px;
    font-size: 2.1rem;
  }

  .tet-lightbox__close {
    top: 4px;
    right: 4px;
  }

  .tet-lightbox-thumb-title {
    font-size: 0.88rem;
    line-height: 1.12;
  }
}