/* Styles spécifiques à encyclopedie.php.
   Externalisés depuis la balise <style> de la page pour faciliter la maintenance. */

* { box-sizing: border-box; }
:root {
  --wood: #7c3f19; --panel: #efe7c8; --accent: #c5522b;
  --green: #1f8f45; --text: #24160d; --bg-card: #f5f0dc;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--text);
  min-height: 100vh;
}
.app { max-width: 1280px; margin: 0 auto; padding: 18px; }


.photo-contribution-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 2px solid rgba(47, 107, 53, .62);
  border-radius: 10px;
  background: rgba(239, 247, 222, .95);
  box-shadow: 0 3px 0 rgba(47, 107, 53, .18);
}
.photo-contribution-banner div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.photo-contribution-banner strong {
  color: #245c2c;
  font-size: .96rem;
  line-height: 1.2;
}
.photo-contribution-banner span {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
  opacity: .82;
}
.photo-contribution-banner a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 8px 13px;
  border: 2px solid #2f7d38;
  border-radius: 8px;
  background: linear-gradient(180deg, #4aa74e, #34863d);
  color: #fff;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgba(24, 84, 31, .24);
}
.photo-contribution-banner a:hover,
.photo-contribution-banner a:focus-visible {
  background: linear-gradient(180deg, #55b35a, #3d9346);
  outline: none;
}

/* Filtres */
.filters {
  background: rgba(239,231,200,.95);
  border: 4px solid var(--wood);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
}
.filters label { font-weight: 800; font-size: .88rem; display: flex; flex-direction: column; gap: 4px; }
.filters select, .filters input {
  padding: 7px 10px;
  border: 2px solid var(--wood);
  border-radius: 6px;
  font-size: .9rem;
  background: white;
  min-width: 160px;
}
.filters-footer {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}
.filters-note {
  margin: 0;
  max-width: 900px;
  font-size: .82rem;
  line-height: 1.35;
  font-weight: 700;
  opacity: .78;
}
.filter-count {
  font-weight: 700;
  font-size: .9rem;
  margin-left: auto;
  opacity: .7;
  white-space: nowrap;
  text-align: right;
}
.reset-btn {
  padding: 8px 14px;
  border: 2px solid var(--accent);
  background: #e3de93;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  font-size: .85rem;
}
.reset-btn:hover { background: #d5d17f; }

/* Grille de cartes */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.card {
  background: var(--bg-card);
  border: 3px solid var(--wood);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 rgba(0,0,0,.15); }
.hidden { display: none !important; }
.card.hidden { display: none; }
.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #dfc178, #c9a85c);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: linear-gradient(135deg, #dfc178, #c9a85c);
}
.card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #dfc178, #c9a85c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
.card-photo-credit {
  position: absolute;
  left: 7px;
  bottom: 7px;
  max-width: calc(100% - 14px);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: .68rem;
  line-height: 1.15;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}
.card-photo-credit a { color: #fff; text-decoration: underline; }
.card-body { padding: 8px 10px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.card-name {
  font-weight: 900;
  font-size: .95rem;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.validation-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px 4px;
  border-radius: 999px;
  border: 1px solid rgba(124,63,25,.35);
  font-size: .64rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 1px rgba(0,0,0,.08);
}
.validation-label-photo {
  background: #dfe8cf;
  color: #35572d;
  border-color: #9fb27f;
}
.validation-label-text {
  background: #ead9cf;
  color: #7a3f30;
  border-color: #c49a86;
}
.validation-label-full {
  background: #f3e3ad;
  color: #6b4a00;
  border-color: #d0ad58;
}
.card-pays { font-size: .75rem; opacity: .75; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flag-icon {
  width: 1.25em;
  height: .88em;
  object-fit: cover;
  display: inline-block;
  vertical-align: -0.1em;
  margin-right: .35em;
  border: 1px solid rgba(36,22,13,.22);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.16);
}
.card-pays .flag-icon { width: 1.15em; height: .82em; }
.origin-location .flag-icon { width: 1.3em; height: .92em; }

.card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.card-name-link {
  color: inherit;
  text-decoration: none;
}
.card-name-link:hover,
.card-name-link:focus-visible {
  color: #1f6a34;
  outline: none;
}
.fiche-detail-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.fiche-detail-action[hidden],
.fiche-detail-action.hidden {
  display: none !important;
}
.fiche-detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(47, 107, 53, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #1f6a34;
  font-size: .86rem;
  font-weight: 850;
  text-decoration: none;
}
.fiche-detail-link:hover,
.fiche-detail-link:focus-visible {
  border-color: #1f6a34;
  background: #fff;
  outline: none;
}
.tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 700;
}
.tag-aptitude { background: #d4edda; color: #155724; }
.tag-niveau   { background: #fff3cd; color: #856404; }
.tag-format   { background: #e2e8f0; color: #2d3748; }
.fiche-approval {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 10px;
  padding: 8px 11px;
  border: 2px solid rgba(215,169,0,.72);
  border-radius: 10px;
  background: rgba(255,241,184,.42);
  color: #5a2a12;
  font-size: .85rem;
  line-height: 1.28;
  max-width: 100%;
}
.fiche-approval-title { font-weight: 1000; color: #7a4c00; margin: 0; }
.fiche-approval-meta { font-size: .77rem; opacity: .86; }
.fiche-approval a { color: var(--accent); font-weight: 900; }

/* Aucun résultat */
.no-result { text-align: center; padding: 60px 20px; font-size: 1.2rem; opacity: .6; grid-column: 1/-1; }

/* Dialog fiche */
dialog {
  --fiche-photo-h: min(64vw, 586.667px);
  border: 4px solid var(--wood);
  border-radius: 12px;
  padding: 0;
  max-width: 1120px;
  width: min(97vw, 1120px);
  position: relative;
  max-height: 92vh;
  overflow: hidden;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
dialog::backdrop { background: rgba(0,0,0,.55); }

.fiche-header {
  position: relative;
  width: 100%;
  height: var(--fiche-photo-h);
  min-height: var(--fiche-photo-h);
  max-height: var(--fiche-photo-h);
  overflow: hidden;
  isolation: isolate;
  background: #b99a61;
}
.fiche-gallery {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100%;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  background: #b99a61;
  scrollbar-width: none;
  z-index: 1;
}
.fiche-gallery::-webkit-scrollbar { display: none; }
.fiche-photo-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #b99a61;
}
.fiche-photo-placeholder {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dfc178, #c9a85c);
  font-size: 4rem;
}
.fiche-photo-backdrop {
  position: absolute;
  inset: -18px;
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  object-fit: cover;
  object-position: center center;
  filter: blur(16px);
  transform: scale(1.05);
  opacity: .42;
  z-index: 0;
}
.fiche-photo-main {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #b99a61;
}
.gallery-nav {
  position: absolute;
  top: 50%;
  bottom: auto;
  margin-top: 0;
  transform: translateY(-50%);
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 95;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.gallery-nav[hidden] {
  display: none !important;
}
.gallery-nav.is-disabled,
.gallery-nav:disabled {
  opacity: .38;
  cursor: default;
}
.gallery-nav.prev { left: 10px; }
.gallery-nav.next { right: 10px; }
.gallery-nav:focus-visible {
  outline: 3px solid rgba(255,255,255,.92);
  outline-offset: 2px;
}
.gallery-nav:hover:not(:disabled):not(.is-disabled),
.gallery-nav:active:not(:disabled):not(.is-disabled) {
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.58);
}
.gallery-counter {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 90;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: .75rem;
  pointer-events: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
}
.fiche-credit {
  position: absolute;
  left: 12px;
  bottom: 8px;
  z-index: 90;
  max-width: calc(100% - 110px);
  padding: 5px 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  text-shadow: 0 1px 1px rgba(0,0,0,.65);
}
.fiche-credit a {
  color: #fff;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.fiche-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: rgba(58, 38, 24, .72);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
}
.fiche-close:hover,
.fiche-close:focus-visible {
  background: rgba(78, 52, 33, .84);
  outline: none;
}

.fiche-body {
  max-height: calc(92vh - var(--fiche-photo-h));
  overflow-y: auto;
  background: var(--panel);
}
.fiche-summary { padding: 20px 24px 0; }
.fiche-details { padding: 0 24px 24px; }
.fiche-photo-note {
  box-sizing: border-box;
  width: min(var(--fiche-note-w, 760px), calc(100% - 32px));
  max-width: calc(100% - 32px);
  margin: 10px auto 0;
  color: #6a4212;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.fiche-photo-note[hidden],
.fiche-photo-note.hidden { display: none !important; }
.fiche-photo-note-content {
  padding: 12px 14px;
  border-left: 4px solid #c98b33;
  border-radius: 12px;
  background: rgba(255,248,222,.84);
  box-shadow: inset 0 0 0 1px rgba(201,139,51,.18);
}
.fiche-photo-note-label {
  display: block;
  margin-bottom: 6px;
  color: #8b5b18;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fiche-photo-note-text {
  font-size: .9rem;
  font-weight: 700;
  color: #4c2d12;
}
.fiche-photo-note-toggle {
  display: none;
}
.fiche-photo-note-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: .95rem;
  line-height: 1;
}
.fiche-title { margin: 0 0 4px; font-size: 1.5rem; }
.fiche-origin {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
  font-size: .9rem;
  opacity: .9;
}
.origin-category-inline {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #d4edda;
  color: #155724;
  font-weight: 800;
  font-size: .76rem;
  line-height: 1.2;
}
.origin-location { opacity: .78; }
.fiche-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.fiche-info {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(124,63,25,.25);
  border-radius: 6px;
  background: rgba(255,255,255,.5);
}
.fiche-info-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  opacity: .6;
}
.fiche-info-value { margin-top: 2px; font-size: .9rem; font-weight: 700; }
.fiche-desc { font-size: .95rem; line-height: 1.55; }
.fiche-desc p { margin: 0 0 10px; }

.fiche-desc .race-inline-link {
  color: #1f6a34;
  font-weight: 850;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.fiche-desc .race-inline-link:hover,
.fiche-desc .race-inline-link:focus-visible {
  color: #6f2f12;
}
.fiche-photo-credits {
  margin-top: 14px;
  padding: 12px 14px;
  border: 2px dashed rgba(124,63,25,.55);
  border-radius: 10px;
  background: rgba(255,255,255,.45);
}
.fiche-photo-credits h3 {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 1rem;
}
.photo-credit-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
}
.photo-credit-list li {
  padding: 7px 9px;
  border: 1px solid rgba(124,63,25,.22);
  border-radius: 7px;
  background: rgba(255,255,255,.58);
}
.photo-credit-list a { color: var(--accent); font-weight: 900; }
.fiche-niveaux {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}

/* Fiche paysage pour les ordinateurs : photo à gauche, synthèse à droite.
   Le descriptif détaillé reste ensuite sur toute la largeur avec une seule
   barre de défilement pour l'ensemble de la fenêtre. */
@media (min-width: 900px) and (min-height: 620px) {
  dialog[open] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, .95fr);
    grid-template-rows: auto auto;
    align-items: start;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .fiche-header {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 3 / 2;
    align-self: start;
    border-right: 2px solid rgba(124,63,25,.22);
  }
  .fiche-header .fiche-gallery {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .fiche-body { display: contents; }
  .fiche-photo-note {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 10px;
    margin-bottom: 0;
  }
  .fiche-summary {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 14px 26px 10px;
    background: var(--panel);
    align-self: start;
  }
  .fiche-details {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 14px 24px 24px;
    border-top: 2px solid rgba(124,63,25,.22);
    background: var(--panel);
  }
  .fiche-title {
    padding-right: 28px;
    font-size: clamp(1.4rem, 2vw, 1.75rem);
  }
  .fiche-origin { margin-bottom: 8px; }
  .fiche-approval {
    margin-bottom: 8px;
  }
  .fiche-niveaux { margin-bottom: 2px; }
  .fiche-section-reperes { margin-top: 0; margin-bottom: 14px; }
  .fiche-section-reperes .fiche-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 0;
  }
  .fiche-info { padding: 8px 10px; }
  .fiche-info-value {
    overflow-wrap: anywhere;
    font-size: .88rem;
  }
  .fiche-close {
    width: 36px;
    height: 36px;
  }
}

@media (min-width: 900px) and (min-height: 620px) and (max-height: 760px) {
  .fiche-header { aspect-ratio: 3 / 2; min-height: 0; }
  .fiche-summary { padding: 12px 20px 10px; }
  .fiche-title { font-size: 1.35rem; }
  .fiche-origin { margin-bottom: 9px; font-size: .84rem; }
  .fiche-approval {
    margin-bottom: 8px;
    padding: 7px 9px;
    font-size: .82rem;
  }
  .fiche-approval-meta { font-size: .75rem; }
  .fiche-niveaux { margin-bottom: 8px; }
  .fiche-section-title { margin-bottom: 6px; }
  .fiche-info { padding: 6px 8px; }
  .fiche-details { padding-top: 14px; }
}

@media (max-width: 899px), (max-height: 619px) {
  dialog[open] { display: block; }
  .fiche-header {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 3 / 2;
  }
  .fiche-gallery,
  .fiche-photo-slide {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .fiche-body {
    display: block;
    max-height: calc(92vh - var(--fiche-photo-h));
    overflow-y: auto;
  }
}

@media (max-width: 760px) {
  dialog { --fiche-photo-h: 64vw; }
  .fiche-close { width: 34px; height: 34px; top: 10px; right: 10px; }
  .fiche-summary { padding: 20px 18px 0; }
  .fiche-details { padding: 0 18px 20px; }
  .fiche-photo-note {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    margin-top: 8px;
  }
  .fiche-photo-note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(201,139,51,.45);
    border-radius: 999px;
    background: rgba(255,248,222,.92);
    color: #8b5b18;
    font-size: .84rem;
    font-weight: 900;
    box-shadow: none;
  }
  .fiche-photo-note-toggle-text {
    line-height: 1.1;
  }
  .fiche-photo-note-toggle::after {
    content: '▾';
    font-size: .78rem;
    line-height: 1;
    transition: transform .18s ease;
  }
  .fiche-photo-note-content {
    display: none;
    margin-top: 8px;
    padding: 11px 12px;
  }
  .fiche-photo-note-label {
    display: none;
  }
  .fiche-photo-note.is-open .fiche-photo-note-toggle::after {
    transform: rotate(180deg);
  }
  .fiche-photo-note.is-open .fiche-photo-note-content {
    display: block;
  }
  .gallery-nav {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
  .gallery-nav.prev { left: 8px; }
  .gallery-nav.next { right: 8px; }
}

@media (min-width: 900px) and (min-height: 620px) and (max-width: 1040px) {
  .fiche-section-reperes .fiche-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px), (max-height: 619px) {
  .fiche-section-reperes { margin-top: 12px; }
}

.site-footer {
  margin: 24px auto 4px;
  padding: 12px 0;
  text-align: center;
  font-size: .84rem;
  font-weight: 800;
  opacity: .82;
}
.site-footer a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer a:hover { color: var(--accent); }

@media (max-width: 760px) {
  .app { padding: 12px; }
.filters-footer { flex-direction: column; gap: 6px; }
  .filter-count { margin-left: 0; text-align: left; }
  dialog { --fiche-photo-h: 220px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
  .card-body { padding: 7px 8px; }
  .card-name { font-size: .88rem; }
  .validation-label { font-size: .58rem; padding: 3px 7px 4px; }
}

/* Fond illustré ovin : version téléphone portrait */
@media (max-width: 700px) and (orientation: portrait) {
}

/* Téléphone paysage : même fond large que l’accueil, sans fixed pour éviter les saccades */
@media (max-width: 950px) and (max-height: 620px) and (orientation: landscape) {
}

  

/* Mise en évidence d'une fiche ouverte depuis le mode Défi. */
.card.is-direct-target {
  outline: 4px solid rgba(31,143,69,.75);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(31,143,69,.18), 0 7px 0 rgba(0,0,0,.15);
}


@media (max-width: 700px) {
  .photo-contribution-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
  }
  .photo-contribution-banner a {
    width: 100%;
    min-height: 43px;
  }
}


/* v1.21.99 — fiche verticale : photo et texte défilent ensemble. */
dialog#fiche-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(96vw, var(--fiche-dialog-w, 980px));
  max-width: 980px;
  max-height: min(92vh, calc(100vh - 18px));
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  background: var(--panel);
  scrollbar-gutter: stable;
}
dialog#fiche-dialog[open] {
  display: block;
}
.fiche-sticky-header {
  position: sticky;
  top: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 9px 12px 9px 20px;
  border-bottom: 2px solid rgba(124,63,25,.34);
  background: rgba(239,231,200,.97);
  box-shadow: 0 3px 10px rgba(45,27,14,.16);
  backdrop-filter: blur(7px);
}
.fiche-sticky-header .fiche-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.fiche-detail-link--header {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
  border-color: rgba(47, 107, 53, .48);
  background: rgba(255, 255, 255, .80);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.fiche-detail-link--header[hidden],
.fiche-detail-link--header.hidden {
  display: none !important;
}
.fiche-detail-link-label-short {
  display: none;
}
.fiche-close {
  position: static;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 2px solid var(--accent);
  background: #fffaf0;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
}
.fiche-close:hover,
.fiche-close:focus-visible {
  background: #fff2dc;
  color: #7c2f18;
  outline: none;
}
@media (min-width: 900px) and (min-height: 620px) {
  dialog#fiche-dialog[open] { display: block; }
}
.fiche-header {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 3 / 2;
  border-right: 0;
  background: #b99a61;
}
.fiche-header .fiche-gallery,
.fiche-gallery,
.fiche-photo-slide {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 3 / 2;
}
.fiche-header .fiche-gallery {
  position: absolute;
  inset: 0;
}
.fiche-photo-main {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.fiche-credit {
  display: none !important;
}
.fiche-body {
  display: block;
  max-height: none;
  overflow: visible;
  background: var(--panel);
}
.fiche-summary {
  padding: 18px 24px 0;
  background: var(--panel);
}
.fiche-details {
  padding: 0 24px 24px;
  border-top: 0;
  background: var(--panel);
}
.fiche-photo-note {
  width: min(var(--fiche-note-w, 760px), calc(100% - 32px));
  max-width: calc(100% - 32px);
}
.fiche-origin {
  margin-bottom: 10px;
}
.fiche-approval {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  width: auto;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 5px 9px;
  border-width: 1px;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1.2;
}
.fiche-approval-title {
  margin: 0;
  white-space: nowrap;
}
.fiche-approval-meta {
  font-size: .72rem;
}
.fiche-niveaux {
  margin-bottom: 12px;
}
.fiche-section-reperes {
  margin: 0 0 14px;
}
.fiche-section-reperes .fiche-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 0;
}
.fiche-info {
  padding: 8px 10px;
}
.gallery-nav,
.gallery-nav:hover:not(:disabled):not(.is-disabled),
.gallery-nav:active:not(:disabled):not(.is-disabled) {
  top: 50%;
  bottom: auto;
  margin: 0;
  transform: translateY(-50%);
}
@media (max-width: 760px) {
  dialog#fiche-dialog {
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: min(98vw, 980px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .fiche-sticky-header {
    min-height: 52px;
    padding: 7px 9px 7px 14px;
    gap: 8px;
  }
  .fiche-header-actions {
    gap: 6px;
  }
  .fiche-detail-link--header {
    min-height: 34px;
    padding: 5px 10px;
  }
  .fiche-close {
    width: 34px;
    height: 34px;
  }
  .fiche-summary {
    padding: 15px 16px 0;
  }
  .fiche-details {
    padding: 0 16px 18px;
  }
  .fiche-section-reperes .fiche-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}
@media (max-width: 560px) {
  .fiche-detail-link-label-full {
    display: none;
  }
  .fiche-detail-link-label-short {
    display: inline;
  }
}
@media (max-width: 390px) {
  .fiche-section-reperes .fiche-grid {
    grid-template-columns: 1fr;
  }
}


/* v1.22.15 — version bilingue */
.translation-progress-note {
  color: #6b452e;
  font-weight: 850;
}

html[lang="en"] .filters select,
html[lang="en"] .filters input,
html[lang="en"] .reset-btn {
  min-width: 175px;
}

@media (max-width: 700px) {
  html[lang="en"] .filters select,
  html[lang="en"] .filters input,
  html[lang="en"] .reset-btn {
    min-width: 0;
  }
}


/* v1.23.47 — correction propre Safari/WebKit de la galerie en fiche encyclopédie.
   La galerie n'utilise plus le défilement horizontal dans le dialog : une seule
   photo est rendue visible à la fois. Cela évite les images géantes ou la zone
   vide observées sur WebKit, tout en conservant les flèches et le compteur. */
dialog#fiche-dialog {
  --fiche-photo-h: min(58vw, 586px);
}

dialog#fiche-dialog .fiche-header {
  height: var(--fiche-photo-h) !important;
  min-height: var(--fiche-photo-h) !important;
  max-height: var(--fiche-photo-h) !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  background: #b99a61;
}

dialog#fiche-dialog .fiche-gallery {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  background: #b99a61;
}

dialog#fiche-dialog .fiche-photo-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: #b99a61;
}

dialog#fiche-dialog .fiche-photo-slide[hidden] {
  display: none !important;
}

dialog#fiche-dialog .fiche-photo-slide.is-current {
  display: flex !important;
}

dialog#fiche-dialog .fiche-photo-placeholder {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

dialog#fiche-dialog .fiche-photo-main {
  display: block !important;
  flex: 0 0 auto;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  object-position: center center;
  background: #b99a61;
}

/* v1.23.48 — chevrons placés sur la photo réellement affichée.
   Après la correction Safari 1.23.47, l'image peut être contenue avec des bandes
   latérales. Les boutons sont donc positionnés avec des variables calculées en JS
   à partir du rectangle de l'image visible, et non plus des bords de la galerie. */
dialog#fiche-dialog .gallery-nav.prev {
  left: var(--gallery-prev-left, 10px) !important;
}
dialog#fiche-dialog .gallery-nav.next {
  right: var(--gallery-next-right, 10px) !important;
}
dialog#fiche-dialog .gallery-counter {
  right: var(--gallery-counter-right, 12px) !important;
  bottom: var(--gallery-counter-bottom, 8px) !important;
}


/* v1.23.49 — la largeur de la fenêtre suit la largeur réelle de la photo.
   Sur desktop, après la correction Safari, certaines photos 3:2 laissaient
   apparaître deux bandes latérales brunes parce que la fenêtre restait plus
   large que l'image contenue. Une variable CSS pilotée en JS permet désormais
   d'aligner la largeur du dialog sur la largeur réellement affichée. */


/* v1.23.50 — fiche fixée dans la fenêtre visible sur iPhone/Safari. */
html.drb-fiche-open,
body.drb-fiche-open {
  overscroll-behavior: none;
}
dialog#fiche-dialog::backdrop {
  background: rgba(25, 15, 8, .62);
}


/* v1.23.52 — agrandissement d'affichage des anciennes photos.
   Les premières photos importées ne font parfois que 800 px de large. Dans la
   fiche encyclopédique, elles sont désormais simplement agrandies à l'affichage
   dans la zone photo existante. Le fichier source, la base et les autres pages
   ne sont pas modifiés. */


/* v1.23.52 — retour systématique en haut de la fiche à chaque ouverture.
   Le réglage principal est en JavaScript, car certains Safari/iOS conservent
   le scroll interne du dialog entre deux fiches. */

/* 0.2.5 — introduction sémantique et pédagogique de l'encyclopédie. */
.encyclopedia-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 16px 0 12px;
  padding: 16px 18px;
  border: 1px solid var(--wool-border);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--wool-light), var(--sage-soft));
  box-shadow: var(--wool-shadow-soft);
}
.encyclopedia-intro > div {
  min-width: 0;
}
.encyclopedia-intro h2 {
  margin: 0 0 5px;
  color: var(--ram-brown);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}
.encyclopedia-intro p {
  margin: 0;
  color: var(--muted-ink);
  font-size: .9rem;
  line-height: 1.45;
}
.encyclopedia-intro > a {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(78, 113, 63, .32);
  border-radius: 10px;
  background: rgba(255, 253, 248, .82);
  color: var(--pasture-dark);
  font-size: .84rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.encyclopedia-intro > a:hover,
.encyclopedia-intro > a:focus-visible {
  background: #fff;
  transform: translateY(-1px);
}
@media (max-width: 760px) {
  .encyclopedia-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
  }
  .encyclopedia-intro > a {
    white-space: normal;
  }
}