/* ==========================================================================
   photo.css — La Boîte de Photos
   Ecrans de travail : albums, grilles de photos, recadrage, fiche, QR.
   Charge en plus de app.css. Aucune couleur en dur (charte-tokens.css).
   Pensé pour le pouce : peu de defilement, cibles tactiles de 44 px.
   ========================================================================== */

/* --- Mur d'albums --------------------------------------------------------
   Meme presentation que les photos : pas de cadre, la couverture parle
   d'elle-meme, le titre est pose en filigrane dessus.
   -------------------------------------------------------------------------- */
.grille-albums {
  columns: 2;
  column-gap: 6px;
  margin-block: var(--pad-s);
  padding: 0;
  list-style: none;
}

.grille-albums > li {
  break-inside: avoid;
  margin-bottom: 6px;
}

.carte-album {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--c-surface-douce);
  text-decoration: none;
  color: inherit;
}

.carte-album:hover { outline: 2px solid var(--c-primaire); outline-offset: -2px; }

.carte-album-image {
  display: block;
  position: relative;
  /* Une couverture d'album est toujours dans le meme format : c'est ce qui
     donne a la liste son allure reguliere, alors que le mur de photos joue
     au contraire sur les proportions d'origine. */
  aspect-ratio: 4 / 3;
}

.carte-album-image img {
  width: 100%;
  height: 100%;
  /* Vignette de navigation, pas consultation du souvenir : le rognage est
     assume ici, et la photo entiere reste visible partout ailleurs. */
  object-fit: cover;
}

.carte-album-vide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-texte-doux);
  font-size: 0.9rem;
}

.carte-album-texte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  color: var(--c-fond);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.carte-album-titre {
  display: block;
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.2;
}

.carte-album-nb {
  display: block;
  margin-top: 1px;
  font-size: 0.8rem;
  opacity: 0.9;
}

/* --- Galerie de photos ---------------------------------------------------
   Presentation « mur d'images » : pas de cadre, pas de vignettes carrees,
   chaque photo garde ses proportions et la mise en page se fait en colonnes
   qui se remplissent d'elles-memes. La legende est posee en filigrane sur
   l'image plutot que dans un bandeau qui doublerait la hauteur.
   -------------------------------------------------------------------------- */
.grille-photos {
  columns: 2;
  column-gap: 6px;
  margin-block: var(--pad-s);
  padding: 0;
  list-style: none;
}

.grille-photos > li {
  /* Une photo ne doit jamais etre coupee entre deux colonnes. */
  break-inside: avoid;
  margin-bottom: 6px;
}

.vignette,
.tuile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--c-surface-douce);
  text-decoration: none;
  color: inherit;
}

.vignette img,
.tuile img {
  display: block;
  width: 100%;
  height: auto;
  /* Proportions d'origine conservees : c'est ce qui donne le rythme du mur. */
  background: var(--c-surface-douce);
}

.tuile-image {
  display: block;
  text-decoration: none;
}

.vignette-legende,
.tuile-legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 8px 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  color: var(--c-fond);
  font-size: 0.85rem;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  text-decoration: none;
}

.vignette-date {
  display: block;
  font-size: 0.78rem;
  opacity: 0.85;
}

.vignette:hover,
.tuile:hover { outline: 2px solid var(--c-primaire); outline-offset: -2px; }

/* Bande de pastilles, calee a droite pour degager la case a cocher. */
.tuile-badges {
  position: absolute;
  top: 6px;
  right: 6px;
  left: 52px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.tuile-badges > span {
  position: static;
  top: auto;
  right: auto;
  left: auto;
}

.vignette-etat {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--c-primaire-clair);
  color: var(--c-primaire-fonce);
}

/* --- Tuile selectionnable (ranger des photos dans un album) --------------- */
.tuile-choix {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* Cible tactile large : on coche en visant le coin, pas une case de 16 px. */
  width: 46px;
  height: 46px;
  cursor: pointer;
}

.tuile-choix input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.tuile-coche {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--c-surface);
  border-radius: 6px;
  background: rgba(43, 33, 25, 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.tuile-choix input:checked ~ .tuile-coche {
  background: var(--c-primaire);
  border-color: var(--c-fond);
}

/* La coche elle-meme, dessinee en CSS pour eviter une image de plus. */
.tuile-choix input:checked ~ .tuile-coche::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 8px;
  width: 6px;
  height: 12px;
  border: solid var(--c-fond);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.tuile-choix input:focus-visible ~ .tuile-coche {
  outline: 3px solid var(--c-primaire);
  outline-offset: 2px;
}

/* Libelle pour les lecteurs d'ecran : la case seule ne dit pas quoi elle coche. */
.tuile-libelle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tuile:has(.tuile-choix input:checked) {
  outline: 3px solid var(--c-primaire);
  outline-offset: -3px;
}

/* --- Etat vide ------------------------------------------------------------ */
.vide {
  border: 2px dashed var(--c-bordure);
  border-radius: var(--rayon);
  padding: var(--pad-s);
  text-align: center;
  color: var(--c-texte-doux);
}

/* --- Recadrage ------------------------------------------------------------ */
#zone-cadrage {
  background: var(--c-surface-douce);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  /* Marge laterale genereuse : une poignee collee au bord de l'ecran
     declencherait le geste « page precedente » du navigateur mobile au
     lieu de deplacer le cadre. */
  padding: 10px 28px;
  text-align: center;
  /* Empeche le glissement de se propager a la page (retour, rafraichissement). */
  overscroll-behavior: contain;
}

#toile-cadrage {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  overscroll-behavior: contain;
  border-radius: var(--rayon-s);
  touch-action: none;   /* le doigt deplace le cadre, il ne fait pas defiler */
  cursor: crosshair;
}

#zone-cadrage.erreur-chargement::after {
  content: "L image n a pas pu etre chargee. Rechargez la page.";
  display: block;
  color: var(--c-erreur);
  padding: var(--pad-m);
}

.outils-cadrage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.reglage-angle {
  margin-top: 10px;
  text-align: center;
}

.reglage-angle input[type="range"] {
  width: min(100%, 320px);
  accent-color: var(--c-primaire);
}

.bords {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
  border: 0;
  padding: 0;
}

.bords label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.bords input {
  width: 100%;
  padding: 9px 6px;
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon-s);
  background: var(--c-fond);
  color: var(--c-texte);
  font: inherit;
  text-align: center;
}

/* --- Fiche d'edition ------------------------------------------------------ */
.edition {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pad-s);
  align-items: start;
}

.apercu { margin: 0; }

.apercu img {
  display: block;
  width: 100%;
  max-height: 45vh;
  object-fit: contain;
  background: var(--c-surface-douce);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
}

.apercu figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--c-texte-doux);
}

.apercu-aide { display: block; }

/* Les actions de la photo sont des boutons de meme taille, jamais des liens
   noyes dans une phrase : au pouce, on doit voir ou appuyer. */
.actions-apercu { margin-block: 8px 0; }

.actions-apercu .btn { font-size: 0.95rem; }

.formulaire-large { max-width: none; }

.ligne-champs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.champ textarea { min-height: 5.5rem; resize: vertical; }

.champ textarea.grand { min-height: 9rem; }

/* --- QR code -------------------------------------------------------------- */
.qr-apercu {
  margin: 0 0 var(--pad-s);
  text-align: center;
}

.qr-apercu img {
  display: block;
  /* Borne stricte : un QR de 430 px poussait la page hors de l'ecran. */
  width: min(100%, 240px);
  height: auto;
  margin: 0 auto;
  padding: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon-s);
  /* Un QR interpole devient illisible : on garde des pixels francs. */
  image-rendering: pixelated;
}

.qr-apercu figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--c-texte-doux);
}

.qr-lien {
  word-break: break-all;
  font-size: 0.9rem;
}

/* --- Dictee --------------------------------------------------------------- */
.dictee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.dictee-etat {
  font-size: 0.9rem;
  color: var(--c-texte-doux);
}

.btn-micro[aria-pressed="true"] {
  background: var(--c-primaire-fonce);
  border-color: var(--c-primaire-fonce);
  color: var(--c-fond);
}

.btn-micro[aria-pressed="true"]::after {
  content: " — en ecoute";
  font-weight: 400;
}

/* --- Barre d'actions collante (mobile) ------------------------------------ */
.barre-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px 0;
  background: var(--c-fond);
  border-top: 1px solid var(--c-bordure);
}

/* Un bouton seul sur sa ligne prend toute la largeur plutot que la moitie. */
.barre-actions > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* --- Responsive -----------------------------------------------------------
   ATTENTION A L'ORDRE : ces media queries se recouvrent (a 1920 px, les
   quatre s'appliquent). A specificite egale, c'est la DERNIERE ecrite qui
   gagne — elles vont donc du plus petit ecran au plus grand. Remettre le
   bloc 700 px a la fin ramenerait le mur a trois colonnes sur un 24 pouces.
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .barre-actions { display: flex; flex-wrap: wrap; }

  .edition { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--pad-m); }

  .apercu img { max-height: 60vh; }

  .grille-photos { columns: 3; column-gap: 8px; }

  .grille-photos > li { margin-bottom: 8px; }

  .grille-albums { columns: 3; column-gap: 8px; }

  .grille-albums > li { margin-bottom: 8px; }

  .qr-apercu img { width: min(100%, 320px); }
}

@media (min-width: 1100px) {
  .grille-photos { columns: 4; }

  .grille-albums { columns: 4; }
}

@media (min-width: 1500px) {
  .grille-photos { columns: 5; }

  .grille-albums { columns: 5; }
}

@media (min-width: 1900px) {
  .grille-photos { columns: 6; }

  .grille-albums { columns: 5; }
}



/* --- Filtres de la liste des photos ---------------------------------------
   Replies par defaut : sept listes deroulantes affichees en permanence
   repoussaient les photos hors de l'ecran sur telephone. Le repli s'ouvre
   tout seul quand un filtre est actif — sinon on ne comprendrait pas
   pourquoi la liste est incomplete.
   -------------------------------------------------------------------------- */
.filtres-repli {
  margin-block: var(--pad-s);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  background: var(--c-surface);
}

.filtres-repli > summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  min-height: 44px;
  padding: 11px var(--pad-s);
  font-weight: 600;
  cursor: pointer;
}

.filtres-repli > summary::marker { color: var(--c-primaire); }

.filtres-repli[open] > summary { border-bottom: 1px solid var(--c-bordure); }

.filtres-resume {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--c-primaire-fonce);
}

.filtres {
  display: grid;
  /* Les colonnes se placent d'elles-memes selon la largeur : pas de
     demi-colonne bancale a 500 px. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 12px;
  align-items: end;
  padding: var(--pad-s);
}

.filtres .champ { margin: 0; }

/* Plus compact que dans un vrai formulaire : ce sont des reglages, pas une
   saisie. */
.filtres .champ label {
  margin-bottom: 3px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-texte-doux);
}

.filtres .champ input,
.filtres .champ select,
.lot-duo select {
  height: 40px;
  padding: 0 10px;
  font-size: 0.95rem;
  line-height: 1.2;
}

.filtres .aide { display: none; }

.filtres-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* La photo qu'on vient de modifier, reperee au retour dans la liste :
   apres vingt tirages, la chercher des yeux est decourageant. */
.tuile-reperee {
  outline: 3px solid var(--c-primaire);
  outline-offset: 2px;
}

/* --- Temoignages : plusieurs voix pour une photo -------------------------- */
.temoignages {
  margin-block: var(--pad-s);
  padding: var(--pad-s);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  background: var(--c-fond);
}

.temoignages legend {
  padding: 0 6px;
  font-family: var(--f-titre);
  font-size: 1.05rem;
}

.temoignage {
  margin-bottom: var(--pad-s);
  padding-bottom: var(--pad-s);
  border-bottom: 1px solid var(--c-bordure);
}

.temoignage > label { font-weight: 600; }

.temoignage textarea { width: 100%; }

.temoignages-fiche { margin-block: var(--pad-m); }

.temoignage-fiche {
  margin: 0 0 var(--pad-s);
  padding: var(--pad-s) var(--pad-s) var(--pad-s) calc(var(--pad-s) + 6px);
  border-left: 3px solid var(--c-genre, var(--c-accent));
  background: var(--c-surface);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
}

.temoignage-fiche p { margin: 0 0 6px; }

.temoignage-fiche footer {
  color: var(--c-texte-doux);
  font-style: italic;
}

/* --- Barre d'actions par lot ----------------------------------------------
   Chaque reglage porte son propre bouton, sur la meme ligne : avec deux
   listes et deux boutons melanges, on ne sait plus lequel applique quoi.
   -------------------------------------------------------------------------- */
.barre-lot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 14px;
  align-items: end;
  margin-block: var(--pad-s);
  padding: var(--pad-s);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  background: var(--c-surface-douce);
}

.lot-entete {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
}

.lot-entete .choix-personne { width: auto; background: var(--c-surface); }

.lot-compte {
  color: var(--c-texte-doux);
  font-size: 0.9rem;
}

.lot-action > label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.85rem;
  color: var(--c-texte-doux);
}

.lot-duo {
  display: flex;
  gap: 8px;
}

.lot-duo select {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon-s);
  background: var(--c-fond);
  color: var(--c-texte);
  font: inherit;
  font-size: 0.95rem;
}

.lot-duo .btn { flex: 0 0 auto; }

/* Etat de partage, en coin de vignette : on voit d'un regard ce qui est
   sorti du cercle prive. */
.vignette-partage {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-texte-doux);
  font-size: 0.72rem;
  font-weight: 600;
}

/* --- Diagnostic du stockage ----------------------------------------------- */
.liste-diagnostic,
.liste-manquantes {
  margin-block: var(--pad-s);
  padding: 0;
  list-style: none;
}

.liste-diagnostic > li,
.liste-manquantes > li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-bordure);
}

.diag-libelle {
  flex: 0 0 14rem;
  font-weight: 600;
}

/* L'etat ne repose jamais sur la couleur seule : le texte le dit aussi. */
.diag-ok        { border-left: 4px solid var(--c-succes); }
.diag-attention { border-left: 4px solid var(--c-accent); }
.diag-erreur    { border-left: 4px solid var(--c-erreur); }

.liste-diagnostic code,
.liste-manquantes code {
  font-size: 0.9rem;
  color: var(--c-texte-doux);
  word-break: break-all;
}

.manquante-titre { flex: 0 0 14rem; font-weight: 600; }

/* --- Fiche vue par un lecteur ---------------------------------------------
   Il ne peut pas modifier : on lui montre les informations, pas des champs
   grises. Des champs desactives sont une frustration, pas une interface.
   -------------------------------------------------------------------------- */
.fiche-lecture {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: 6px 16px;
  margin: 0 0 var(--pad-s);
}

.fiche-lecture dt {
  font-size: 0.85rem;
  color: var(--c-texte-doux);
}

.fiche-lecture dd { margin: 0; }

/* Qui a déposé, qui a modifié : n'apparait que dans un espace partage. */
.apercu-contributions {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--c-texte-doux);
}