:root {
  --fond: #111;
  --fond-2: #1c1c1c;
  --fond-3: #262626;
  --bord: #333;
  --texte: #e8e8e8;
  --texte-2: #9a9a9a;
  --lien: #4da3ff;
  --accent: #cc0000;
  --jaune: #f5a800;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.5 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--lien); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Bandeau publicitaire : hauteur reservee des le chargement --- */
.pub {
  height: 120px;
  background: #000 repeating-linear-gradient(45deg, #0a0a0a 0 20px, #0d0d0d 20px 40px);
  border-bottom: 1px solid var(--bord);
  /* Toujours visible : le bandeau reste colle en haut pendant le defilement */
  position: sticky;
  top: 0;
  z-index: 30;
}

.barre {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  border-bottom: 3px solid var(--lien);
  background: var(--fond);
}

.logo {
  font-weight: 700;
  font-size: 20px;
  color: var(--jaune);
  border: 2px solid var(--jaune);
  border-radius: 6px;
  padding: 6px 12px;
  white-space: nowrap;
}
.logo span { color: var(--texte); font-size: 14px; }

.titre h1 { margin: 4px 0 0; font-size: 19px; font-weight: 600; }
.retour { font-size: 13px; }

.apercu {
  background: #3a2f00;
  border-bottom: 1px solid #6b5600;
  color: #ffd965;
  padding: 8px 20px;
  font-size: 13px;
}

main { padding: 20px; }

/* --- Pagination --- */
.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.pagination a, .pagination span {
  padding: 7px 13px;
  border-radius: 6px;
  background: var(--fond-3);
  font-size: 14px;
}
.pagination .actif { background: var(--lien); color: #fff; font-weight: 600; }
.pagination .off { color: #555; }
.pagination .compteur { margin-left: auto; background: none; color: var(--texte-2); }

/* Tous les numeros sont affiches : sur un album long la barre deborde, on la
   fait defiler plutot que de la laisser remplir l'ecran de chiffres. Le script
   du pied y amene la page courante. */
.pagination {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 4px;
  scroll-behavior: smooth;
}
.pagination a, .pagination span { flex: 0 0 auto; }
.pagination .compteur { position: sticky; right: 0; background: var(--fond); padding-left: 12px; }

/* --- Filtres par categorie --- */
.filtres { text-align: center; margin: 26px 0 18px; }
.filtres h2 {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texte-2);
  font-weight: 600;
  margin-bottom: 14px;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--fond-2);
  color: var(--texte);
  font-size: 14px;
}
.chip:hover { text-decoration: none; border-color: #555; }
.chip .n {
  background: var(--fond-3);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  color: var(--texte-2);
}
.chip.actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 14px rgba(204, 0, 0, .45);
}
.chip.actif .n { background: rgba(0, 0, 0, .3); color: #fff; }

/* --- Grilles --- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.vignette {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  display: block;
  color: var(--lien);
  font-size: 13px;
}
.vignette:hover { border-color: var(--lien); text-decoration: none; }
.vignette img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
  background: #000;
}
.vignette .meta { color: var(--texte-2); font-size: 12px; }

/* --- Page photo --- */
.visionneuse { text-align: center; }
.visionneuse img {
  max-width: 100%;
  max-height: 78vh;
  border: 1px solid var(--bord);
}
.nomfichier { color: var(--texte-2); font-style: italic; margin: 12px 0 22px; }

.boutons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.bouton {
  padding: 11px 22px;
  border-radius: 6px;
  background: var(--lien);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.bouton:hover { text-decoration: none; filter: brightness(1.12); }
.bouton.vert { background: #1e8e3e; }
.bouton.rouge { background: var(--accent); }
.bouton.off { background: var(--fond-3); color: #666; pointer-events: none; }

.infos {
  max-width: 820px;
  margin: 26px auto;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 20px 24px;
}
.infos h2 {
  font-size: 16px;
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--lien);
}
.infos dl { display: grid; grid-template-columns: 170px 1fr; gap: 12px 16px; margin: 18px 0 0; }
.infos dt { color: var(--texte-2); }
.infos dd { margin: 0; }

.motcle {
  display: inline-block;
  background: var(--fond-3);
  border: 1px solid var(--bord);
  border-radius: 5px;
  padding: 3px 10px;
  margin: 0 6px 6px 0;
  font-size: 13px;
  color: var(--lien);
}
.motcle.attente {
  color: #ffd965;
  border-style: dashed;
  border-color: #6b5600;
}

.vide { color: var(--texte-2); text-align: center; padding: 50px 0; }

footer {
  border-top: 1px solid var(--bord);
  margin-top: 40px;
  padding: 18px 20px;
  color: #555;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 640px) {
  .barre { flex-direction: column; align-items: flex-start; gap: 10px; }
  .infos dl { grid-template-columns: 1fr; gap: 4px 0; }
  .infos dt { margin-top: 10px; }
}

/* --- Phase 3 : navigation, annuaire, recherche --- */
.logo a { color: inherit; text-decoration: none; }

.nav-site {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}
.nav-site input[type=search] {
  background: var(--fond-3);
  border: 1px solid var(--bord);
  border-radius: 999px;
  color: var(--texte);
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  width: 220px;
}
.nav-site input[type=search]:focus { outline: none; border-color: var(--lien); }

.intro { color: var(--texte-2); margin: 16px 0; }
.section {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--texte-2);
  border-bottom: 1px solid var(--bord);
  padding-bottom: 10px;
  margin: 32px 0 16px;
}

.chips.alphabet { justify-content: flex-start; }
.chips.alphabet .chip { padding: 7px 14px; min-width: 44px; justify-content: center; }

.annuaire {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.fiche {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 7px;
  padding: 12px 16px;
  color: var(--texte);
}
.fiche:hover { border-color: var(--lien); text-decoration: none; }
.fiche .nom { font-weight: 600; }
.fiche .n {
  background: var(--fond-3);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  color: var(--texte-2);
  flex: 0 0 auto;
}

.recherche-grande { display: flex; gap: 10px; margin: 20px 0 28px; max-width: 720px; }
.recherche-grande input[type=search] {
  flex: 1;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 7px;
  color: var(--texte);
  padding: 13px 18px;
  font: inherit;
}
.recherche-grande input[type=search]:focus { outline: none; border-color: var(--lien); }
.recherche-grande .bouton { display: flex; align-items: center; }

a.motcle:hover { border-color: var(--lien); text-decoration: none; }

@media (max-width: 760px) {
  .nav-site { width: 100%; margin-left: 0; }
  .nav-site input[type=search] { width: 100%; }
  .nav-site form { flex: 1; }
}

/* --- Phase 5 : acces HD --- */
.encadre-dl {
  max-width: 560px;
  margin: 30px auto;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 26px 30px;
  text-align: center;
}
.encadre-dl h2 { font-size: 17px; margin: 0 0 16px; }
.encadre-dl .sous-texte { color: var(--texte-2); font-size: 13px; margin-top: 16px; }
.form-code { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.form-code input[type=text] {
  background: var(--fond-3);
  border: 1px solid var(--bord);
  border-radius: 7px;
  color: var(--texte);
  padding: 13px 18px;
  font: inherit;
  font-size: 19px;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  width: 260px;
}
.form-code input[type=text]:focus { outline: none; border-color: var(--accent); }
.alerte-dl {
  background: #3a1414;
  border: 1px solid #7a2626;
  color: #ffb4b4;
  border-radius: 6px;
  padding: 11px 16px;
  font-size: 14px;
}

.form-identifiants { display: flex; flex-direction: column; gap: 11px; max-width: 330px; margin: 0 auto; }
.form-identifiants input {
  background: var(--fond-3); border: 1px solid var(--bord); border-radius: 7px;
  color: var(--texte); padding: 12px 16px; font: inherit;
}
.form-identifiants input:focus { outline: none; border-color: var(--accent); }
.form-identifiants .bouton { border: none; cursor: pointer; font: inherit; font-weight: 600; padding: 13px; }
.repli { margin-top: 26px; border-top: 1px solid var(--bord); padding-top: 18px; text-align: left; }
.repli summary { cursor: pointer; color: var(--lien); font-size: 14px; }
.repli .form-code { margin-top: 14px; }

/* --- Accueil : les saisons --- */
.grille-annees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin: 22px 0;
}
.carte-annee {
  display: block;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 10px;
  overflow: hidden;
  color: var(--texte);
}
.carte-annee:hover { border-color: var(--lien); text-decoration: none; }
.carte-annee img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  background: #000;
}
.carte-annee .corps { padding: 16px 20px; }
.carte-annee .annee { font-size: 30px; font-weight: 700; color: var(--jaune); line-height: 1.1; }
.carte-annee .detail { color: var(--texte-2); font-size: 13px; margin-top: 4px; }

.lien-nav { font-weight: 600; white-space: nowrap; }

@media (max-width: 700px) {
  .grille-annees { grid-template-columns: 1fr; }
  .carte-annee img { height: 150px; }
}

/* --- Proposition de nom --- */
.soumission { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; margin-top: 18px; }
.soumission .apercu { width: 100%; border: 1px solid var(--bord); border-radius: 8px; }
.soumission .formulaire {
  background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: 10px; padding: 22px 26px;
}
.soumission h2 { font-size: 17px; margin: 0 0 14px; }
.soumission form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.soumission label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texte-2); }
.soumission input[type=text], .soumission input[type=email] {
  background: var(--fond-3); border: 1px solid var(--bord); border-radius: 6px;
  color: var(--texte); padding: 11px 14px; font: inherit; font-size: 14px;
}
.soumission input:focus { outline: none; border-color: var(--accent); }
.soumission .bouton { border: none; cursor: pointer; font: inherit; font-weight: 600; padding: 12px; }
.soumission .sous-texte { color: var(--texte-2); font-size: 13px; margin-top: 14px; }
.leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .soumission { grid-template-columns: 1fr; }
}

/* --- Logo --- */
.logo {
  display: block;
  border: none;
  padding: 0;
  border-radius: 6px;
  line-height: 0;
  flex: 0 0 auto;
}
.logo img { width: 220px; height: auto; display: block; border-radius: 5px; }
.logo:hover { text-decoration: none; opacity: .88; }

/* --- Retour en haut --- */
.haut {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 21px;
  line-height: 46px;
  text-align: center;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 50;
}
.haut.visible { opacity: .92; pointer-events: auto; }
.haut:hover { opacity: 1; text-decoration: none; }

/* --- Vignette d'ou l'on revient --- */
/* Trois pulsations pour attirer l'oeil, puis un liseré permanent : le
   clignotement aide a retrouver la photo, le liseré evite de la reperdre
   ensuite. */
.grille .vignette:target {
  border-color: var(--lien);
  box-shadow: 0 0 0 2px var(--lien), 0 0 18px rgba(77, 163, 255, .35);
  scroll-margin-top: 140px;
  animation: ks-repere 1s ease-in-out 3;
}

@keyframes ks-repere {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--lien), 0 0 18px rgba(77, 163, 255, .35);
    background: var(--fond-2);
  }
  50% {
    box-shadow: 0 0 0 4px var(--jaune), 0 0 30px rgba(245, 168, 0, .75);
    background: #2b2416;
  }
}

/* Certains utilisateurs demandent a leur systeme de limiter les animations :
   le liseré suffit alors a signaler la vignette. */
@media (prefers-reduced-motion: reduce) {
  .grille .vignette:target { animation: none; }
}

@media (max-width: 700px) {
  .logo img { width: 140px; }
  .haut { right: 14px; bottom: 14px; }

  /*
    En-tete compact. Sur un telephone, le logo, le titre et les deux liens de
    navigation se repartissaient sur trois rangees : 195 px avales avant la
    moindre photo, sur un ecran qui en fait 844. Tout tient maintenant en
    deux rangees serrees.
  */
  .barre { gap: 10px; padding: 8px 14px; flex-wrap: wrap; }
  .barre .titre h1 {
    font-size: 16px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;        /* un titre de photo peut etre long */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .barre .retour { font-size: 12px; }
  .nav-site { font-size: 13px; gap: 10px; margin-left: auto; }

  /* Logo et navigation partagent la premiere rangee, le titre prend la
     seconde : une rangee de moins, soit une cinquantaine de pixels rendus
     a la photo. */
  .barre .logo  { order: 1; }
  .barre .nav-site { order: 2; }
  .barre .titre { order: 3; flex: 1 0 100%; }
  .logo img { width: 110px; }
}

/* Libelles de navigation : version longue par defaut, version courte sur
   telephone. */
.nav-site .court { display: none; }
@media (max-width: 700px) {
  .nav-site .long  { display: none; }
  .nav-site .court { display: inline; }
}

/* --- Liens de la page d'acces --- */
.liens-acces {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bord);
  font-size: 14px;
}

.message-ok {
  margin-top: 18px;
  padding: 14px 18px;
  background: #14351e;
  border: 1px solid #2a6b3f;
  border-radius: 7px;
  color: #9ae6b4;
  font-size: 14px;
}

/* --- Bandeau annonceur --- */
.pub a { display: block; line-height: 0; height: 100%; }
.pub img {
  max-width: 1200px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.bouton.jaune { background: var(--jaune); color: #1a1a1a; }

/* --- Mobile : deux vignettes par ligne ---
   La grille auto-fill imposait une seule colonne sous 470 px, ce qui donnait
   des vignettes enormes et un defilement interminable sur un album de 1000
   photos. En dessous de 700 px on force deux colonnes. */
@media (max-width: 700px) {
  main { padding: 14px; }

  .grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .vignette { padding: 8px; font-size: 11px; word-break: break-all; }
  .vignette img { height: 120px; margin-bottom: 7px; }
  .vignette .meta { font-size: 10px; }

  .pagination a, .pagination span { padding: 6px 11px; font-size: 13px; }
  .pagination .compteur { width: 100%; margin-left: 0; text-align: right; }

  .chip { padding: 7px 13px; font-size: 13px; }
  .filtres { margin: 18px 0 12px; }
}

/* Tres petits ecrans : deux colonnes quand meme, mais plus compactes */
@media (max-width: 400px) {
  .grille { gap: 8px; }
  .vignette img { height: 100px; }
}

/* --- Tactile --- */
.visionneuse img {
  touch-action: pan-y pinch-zoom;   /* le balayage horizontal nous revient */
  -webkit-user-select: none;
  user-select: none;
}
.visionneuse { transition: opacity .15s ease; }

@media (max-width: 700px) {
  /* Cibles tactiles confortables */
  .bouton { padding: 13px 20px; }
  .boutons { gap: 9px; }

  /*
    Sur telephone, la photo passe avant les boutons.
    Sans cela, on arrivait sur la page — ou on y revenait apres un balayage —
    avec l'ecran rempli par l'en-tete et trois rangees de boutons, et il
    fallait faire defiler pour voir l'image. Un balayage doit montrer une
    photo, pas une barre d'outils.
  */
  .p-photo main { display: flex; flex-direction: column; }
  .p-photo .visionneuse { order: -1; margin-top: 2px; }

  /*
    Hauteur calculee sur ce qui reste sous l'en-tete. dvh suit la barre
    d'adresse qui se retracte au defilement : avec vh seul, l'image depasse
    sous le bas de l'ecran tant que la barre est deployee.
  */
  .visionneuse img { max-height: calc(100vh - 150px); }
  .visionneuse img { max-height: calc(100dvh - 150px); }
  .nomfichier { margin: 8px 0 14px; font-size: 13px; }
}

/* --- Credit photo du titre d'album --- */
.credit {
  display: block;
  color: var(--texte-2);
  font-size: .92em;
  font-weight: 400;
  margin-top: 2px;
}
.barre .titre h1 .credit { font-size: .8em; }

/* --- Pied de page --- */
footer a { color: var(--jaune); font-weight: 600; }

/* --- Partage --- */
.partage {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto 8px;
}
.partage .libelle { color: var(--texte-2); font-size: 13px; margin-right: 4px; }
.reseau {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: var(--fond-3);
}
.reseau:hover { text-decoration: none; filter: brightness(1.15); }
.reseau.facebook  { background: #1877f2; }
.reseau.x         { background: #000; border: 1px solid #333; }
.reseau.whatsapp  { background: #25d366; color: #07301a; }
.reseau.pinterest { background: #e60023; }
.reseau.email     { background: #555; }
.reseau.copier    { background: var(--fond-3); color: var(--lien); }

@media (max-width: 700px) {
  .partage { gap: 7px; }
  .reseau { padding: 9px 13px; font-size: 12px; }
}

.nav-site .compte {
  background: var(--fond-3);
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: #9ae6b4;
}
.nav-site .compte:hover { border-color: var(--lien); text-decoration: none; }

/* --- Suggestions de noms --- */
.champ-suggestions { position: relative; display: block; }
.suggestions {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 20;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  background: var(--fond-3);
  border: 1px solid var(--lien);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .6);
}
.suggestions li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid var(--bord);
}
.suggestions li:last-child { border-bottom: none; }
.suggestions li:hover { background: var(--lien); color: #fff; }
.suggestions li .n { color: var(--texte-2); font-size: 12px; flex: 0 0 auto; }
.suggestions li:hover .n { color: rgba(255, 255, 255, .85); }

.soumission .apres-envoi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.soumission .apres-envoi .bouton {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 12px 14px;
}

/* --- Etiquetage par lot (contributeurs identifies) --- */
/* Pastille collee au nom du fichier : elle dit "deja nomme, passe ton chemin". */
.pastille-nom {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  border-radius: 50%;
  background: #1e8e3e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.outils-lot { margin-top: 22px; }
.rang-lot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.rang-lot > .bouton { border: none; cursor: pointer; font: inherit; font-weight: 600; }

.filtre-reste label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--texte-2);
}
.filtre-reste input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.filtre-reste .n {
  background: var(--fond-3);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}

.barre-lot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 10px;
}
/* Une regle d'auteur sur display l'emporte sur [hidden] de la feuille du
   navigateur : sans cette ligne, la barre resterait visible en permanence. */
.barre-lot[hidden] { display: none; }
/* Collee sous le bandeau annonceur pendant le defilement de la grille */
.barre-lot {
  position: sticky;
  top: 120px;
  z-index: 20;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.barre-lot.collee { padding: 10px 14px; }
.barre-lot.collee .lot-aide { display: none; }
.lot-ailleurs { color: var(--texte-2); font-size: 13px; }
.lot-ailleurs:empty { display: none; }
.charger-plus { text-align: center; margin: 22px 0 6px; }
.charger-plus .bouton { border: none; cursor: pointer; font: inherit; }
.charger-plus .bouton:disabled { opacity: .6; cursor: wait; }
@media (max-width: 700px) {
  .barre-lot { top: 64px; }
  .barre-lot.collee .lot-liens { font-size: 12px; gap: 10px; }
}
.barre-lot .champ-suggestions { flex: 1 1 240px; min-width: 200px; }
.barre-lot input[type=text] {
  width: 100%;
  box-sizing: border-box;
  background: var(--fond-3); border: 1px solid var(--bord); border-radius: 6px;
  color: var(--texte); padding: 11px 14px; font: inherit; font-size: 14px;
}
.barre-lot input:focus { outline: none; border-color: var(--accent); }
.barre-lot .bouton { border: none; cursor: pointer; font: inherit; flex: 0 0 auto; }

.lot-liens { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.lot-aide {
  flex: 1 0 100%;
  margin: 0;
  color: var(--texte-2);
  font-size: 13px;
}

/* En mode lot, la vignette selectionne : le curseur doit le dire. */
body.mode-lot .vignette { cursor: pointer; }
body.mode-lot .vignette.choisie {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset;
}

.bilan-lot { max-width: 620px; margin: 24px auto 0; text-align: center; }
.bilan-lot h2 { font-size: 19px; margin: 0 0 14px; }
.bilan { list-style: none; padding: 0; margin: 0; text-align: left; }
.bilan li {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  font-size: 14px;
}
.bilan-lot .apres-envoi { margin-top: 18px; }
.bilan-lot .apres-envoi .bouton { display: inline-block; }

@media (max-width: 620px) {
  .barre-lot .bouton { width: 100%; text-align: center; }
  .pastille-nom { width: 14px; height: 14px; line-height: 14px; font-size: 10px; margin-right: 4px; }
}

/* --- Enregistrer ce navigateur --- */
.souvenir {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--texte-2);
  cursor: pointer;
  margin: 2px 0 4px;
}
.souvenir input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}
.form-code .souvenir { margin: 10px 0; }

/* --- Reprise d'un telechargement apres identification --- */
.reprise-dl {
  max-width: 820px;
  margin: 18px auto 0;
  padding: 12px 18px;
  border: 1px solid #6b5600;
  border-radius: 8px;
  background: #3a2f00;
  color: #ffd965;
  font-size: 14px;
  text-align: center;
}
.reprise-dl a { color: #ffd965; text-decoration: underline; margin-left: 8px; }

/* --- Vue administrateur : albums non publies --- */
.non-publie {
  margin: 14px 0 0;
  padding: 10px 16px;
  border: 1px dashed #6b5600;
  border-radius: 8px;
  background: #3a2f00;
  color: #ffd965;
  font-size: 14px;
}
.non-publie a { color: #ffd965; text-decoration: underline; margin-left: 8px; }

.badge-non-publie {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--jaune);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* --- Consentement aux cookies de mesure --- */
.bandeau-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  padding: 16px 22px;
  background: var(--fond-2);
  border-top: 3px solid var(--lien);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .5);
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies p {
  margin: 0;
  max-width: 760px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texte-2);
}
.bandeau-cookies .choix { display: flex; gap: 12px; flex: 0 0 auto; }
/* Refuser doit se voir autant qu'accepter : meme taille, meme lisibilite. */
.bandeau-cookies .bouton { border: none; cursor: pointer; font: inherit; font-weight: 600; padding: 11px 26px; }
.bandeau-cookies .bouton.gris { background: var(--fond-3); color: var(--texte); }

@media (max-width: 700px) {
  .bandeau-cookies { justify-content: stretch; }
  .bandeau-cookies .choix { width: 100%; }
  .bandeau-cookies .bouton { flex: 1; text-align: center; }
}

/* Le bouton « haut de page » ne doit pas passer sous le bandeau */
body.avec-cookies .haut { bottom: 150px; }
@media (max-width: 700px) { body.avec-cookies .haut { bottom: 200px; } }

/* Formulaire seul, sans aperçu photo (demande de retrait) */
.soumission.seule { grid-template-columns: 1fr; max-width: 680px; margin: 18px auto 0; }
.lien-retrait { text-align: center; margin: 30px 0 0; }
.lien-retrait a { color: var(--texte-2); font-size: 13px; text-decoration: underline; }

/* Album offert : le téléchargement HD ne demande aucun compte */
.gratuit {
  display: inline-block;
  margin: 6px 0 2px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #1e8e3e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* --- Visualisation du haute définition --- */
.hd-vue {
  margin: 10px auto 4px;
  max-width: 1400px;
  height: calc(100vh - 210px);
  min-height: 320px;
  background: #0c0c0c;
  border: 1px solid var(--bord);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}
.hd-vue img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
/* Zoomé : l'image reprend sa taille réelle et le cadre défile */
.hd-vue.zoom {
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: grab;
}
.hd-vue.zoom img { max-width: none; max-height: none; object-fit: none; }
.hd-etat { margin-left: auto; align-self: center; }
.hd-pied { text-align: center; margin: 0 0 18px; }
@media (max-width: 700px) {
  .hd-vue { height: calc(100vh - 260px); }
  .hd-etat { display: none; }
}

/* --- Bouton Adherer dans la navigation --- */
.nav-site .bouton.petit-nav { padding: 7px 14px; font-size: 13px; white-space: nowrap; }

/* Le bandeau annonceur reste colle en haut : les ancres (retour a une
   vignette, a un album) doivent s'arreter sous lui, pas dessous. */
html { scroll-padding-top: 130px; }
@media (max-width: 700px) {
  /* Sur telephone, un bandeau fixe de 120 px mangerait la photo : il garde
     sa place en haut mais en plus mince. */
  .pub { height: 64px; }
  html { scroll-padding-top: 74px; }
}

/* Suggestions : les noms deja presents dans l'album, en tete et marques */
.suggestions li.dans-album { border-left: 3px solid var(--jaune); }
.suggestions li.dans-album .n { color: var(--jaune); }

/* --- Classement par categorie (administrateurs) --- */
.lot-categorie { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lot-categorie select {
  background: var(--fond-3); color: var(--texte); border: 1px solid var(--bord);
  border-radius: 6px; padding: 9px 10px; font: inherit; font-size: 14px;
}
.visibilite-cat { margin: 8px 0 0; font-size: 14px; color: var(--texte-2); }
.etiquette-admin {
  font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600;
  color: #1a1a1a; background: var(--jaune); border-radius: 4px; padding: 2px 6px; margin-left: 6px;
}

/* Mode lot : pas de selection de texte au Maj + clic */
body.mode-lot .grille { user-select: none; -webkit-user-select: none; }

/* --- Retrait d'un mot-cle depuis la page photo (administrateurs) --- */
.retrait-mot { display: inline; margin: 0 8px 0 -6px; }
.retrait-mot .lien-x {
  background: none; border: none; color: var(--texte-2); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 3px; vertical-align: middle;
}
.retrait-mot .lien-x:hover { color: var(--accent); }