/* Feuille de style de la bibliothèque d'images MONTECHNICIEN — valeurs de spec/design.md.
   Couleurs : jetons de src/pages/jetons.ts (vérifiés par tests/pages.test.ts, contrastes compris).
   Échelle de texte : 12 / 14 / 16 / 20 / 24 px. Espacements : 4 / 8 / 12 / 16 / 24 / 32 px.
   Rayons : 8 px (boutons, champs), 12 px (cartes), 9999px (pastilles). Aucun style en ligne (CSP). */

:root {
  --rouge: #dd052b;
  --rouge-survol: #c70527; /* rouge assombri de 10 % */
  --rouge-actif: #b10422; /* rouge assombri de 20 % */
  --texte: #161412;
  --gris: #d8d4d3;
  --blanc: #ffffff;
  --texte-secondaire: #6e6d6c;
  --succes: #16a34a;
  --teinte-rouge: rgba(221, 5, 43, 0.1);
  --fond-gris: rgba(216, 212, 211, 0.4);
  --damier-clair: #c4c4c4; /* case claire du damier des miniatures seulement, jamais du texte */
  --damier: #8c8c8c; /* case foncée du damier des miniatures seulement, jamais du texte */
  --ombre-carte: 0 1px 3px rgba(0, 0, 0, 0.1);
  --police: Poppins, system-ui, "Segoe UI", sans-serif;
  --chasse-fixe: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: Poppins, system-ui, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.3;
}

h1 {
  font-size: 24px;
  font-weight: 700;
}

h2 {
  font-size: 20px;
  font-weight: 600;
}

h3 {
  font-size: 16px;
  font-weight: 600;
}

p {
  margin: 0;
}

a {
  color: var(--rouge);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--rouge-survol);
}

img {
  max-width: 100%;
}

/* Focus toujours visible (navigation au clavier). */
:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
}

.marque {
  white-space: nowrap;
}

.lecteur-seulement {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : visible seulement au focus. */
.lien-evitement {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 10;
  padding: 8px 16px;
  background: var(--blanc);
  color: var(--rouge);
  font-weight: 500;
  border-radius: 8px;
}

.lien-evitement:focus {
  top: 12px;
}

/* --- Bandeau d'en-tête ---------------------------------------------------------------------- */

.bandeau {
  background: var(--rouge);
  color: var(--blanc);
}

.bandeau-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  height: 64px;
  margin: 0 auto;
  padding: 0 24px;
}

.bandeau-accueil {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  color: var(--blanc);
  text-decoration: none;
  font-weight: 500;
}

.bandeau-accueil:hover {
  color: var(--blanc);
}

.bandeau-logo {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
}

.bandeau-titre {
  font-size: 14px;
}

.bandeau :focus-visible {
  outline-color: var(--blanc);
}

.bandeau form {
  margin: 0;
}

/* Lien « Aide » : blanc souligné sur le rouge (5,08:1), cible d'au moins 40 × 40 px. */
.bandeau-aide {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  color: var(--blanc);
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bandeau-aide:hover {
  color: var(--blanc);
}

/* Barre de recherche : même rangée que le logo dès 800 px, centrée dans l'espace libre. */
.bandeau .recherche-bandeau {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  max-width: 480px;
  min-width: 0;
  margin: 0 auto;
}

.bandeau .recherche-bandeau .bouton {
  flex: 0 0 auto;
}

.champ-recherche {
  flex: 1 1 0;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--blanc);
  border-radius: 8px;
  background: var(--blanc);
  color: var(--texte);
  font-family: inherit;
  font-size: 16px;
}

.champ-recherche::placeholder {
  color: var(--texte-secondaire);
  opacity: 1;
}

/* Le contour rouge des champs serait invisible sur le bandeau. */
.bandeau .champ-recherche:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 2px;
}

/* --- Boutons -------------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  min-width: 40px;
  padding: 9px 16px; /* + bordure de 1 px : 10 px × 16 px */
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.bouton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bouton-principal {
  background: var(--rouge);
  color: var(--blanc);
}

.bouton-principal:hover:not(:disabled) {
  background: var(--rouge-survol);
  color: var(--blanc);
}

.bouton-principal:active:not(:disabled) {
  background: var(--rouge-actif);
}

.bouton-secondaire {
  background: var(--blanc);
  border-color: var(--gris);
  color: var(--texte);
}

.bouton-secondaire:hover:not(:disabled) {
  background: var(--fond-gris);
  color: var(--texte);
}

.bouton-destructif {
  background: var(--blanc);
  border-color: var(--rouge);
  color: var(--rouge);
}

/* Survol : rouge sur le gris de survol ne ferait que 4,38:1 ; fond blanc et rouge foncé (≥ 4,5:1). */
.bouton-destructif:hover:not(:disabled) {
  background: var(--blanc);
  border-color: var(--rouge-actif);
  color: var(--rouge-actif);
}

/* Bouton du bandeau : texte blanc sur le rouge. */
.bouton-bandeau {
  background: transparent;
  border-color: var(--blanc);
  color: var(--blanc);
}

.bouton-bandeau:hover {
  background: var(--rouge-survol);
}

.bouton-bandeau:active {
  background: var(--rouge-actif);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* --- Champs --------------------------------------------------------------------------------- */

.champ-groupe {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.champ-groupe label {
  font-weight: 500;
}

.champ {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--gris);
  border-radius: 8px;
  background: var(--blanc);
  color: var(--texte);
  font-family: inherit;
  font-size: 16px;
}

.champ:focus {
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px var(--teinte-rouge);
}

.champ[type="file"] {
  height: auto;
  min-height: 40px;
  padding: 7px 12px;
}

.champ[aria-invalid="true"] {
  border-color: var(--rouge);
}

.aide {
  color: var(--texte-secondaire);
  font-size: 14px;
}

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.formulaire-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}

.formulaire-ligne .champ-groupe {
  flex: 1 1 200px;
}

/* --- Messages ------------------------------------------------------------------------------- */

.erreur {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--rouge);
  font-size: 14px;
}

.icone-erreur,
.icone-succes {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.icone-erreur {
  background: var(--rouge);
  color: var(--blanc);
}

.icone-succes {
  background: var(--succes);
  color: var(--blanc);
}

.confirmation {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-left: 4px solid var(--succes);
  border-radius: 8px;
  color: var(--texte);
}

/* --- Envoi de plusieurs images (public/static/envoi-multiple.js ; spec/design.md « Ligne de lot ») */

.champ:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ligne-lot {
  display: grid;
  grid-template-columns: 1fr minmax(0, 2fr) auto;
  align-items: end;
  gap: 12px;
  padding: 12px;
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-left: 4px solid var(--gris); /* en attente */
  border-radius: 8px;
}

.ligne-lot[data-etat="envoyee"] {
  border-left-color: var(--succes);
}

.ligne-lot[data-etat="refusee"],
.ligne-lot[data-etat="non_envoyee"] {
  border-left-color: var(--rouge);
}

/* Nom du fichier : une ligne, coupé avec « … » (nom complet dans title). */
.ligne-lot-fichier {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texte-secondaire);
  font-size: 14px;
  line-height: 40px; /* aligné sur le champ de 40 px */
}

.ligne-lot-nom {
  min-width: 0;
}

/* Erreur de saisie et état de l'envoi : sous la rangée, sur toute la largeur, en 14 px. */
.ligne-lot-message,
.ligne-lot-etat {
  grid-column: 1 / -1;
}

.ligne-lot-etat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--texte);
  font-size: 14px;
}

/* Dernier texte de l'état (ex. « sous le nom « … » », jusqu'à 120 caractères sans espace) : coupé au
   besoin, jamais de défilement horizontal ; « Envoyée » et l'icône gardent leur largeur. */
.ligne-lot-etat > span:last-child:not([aria-hidden]) {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ligne-lot[data-etat="envoi"] .ligne-lot-etat {
  color: var(--texte-secondaire);
}

.ligne-lot[data-etat="refusee"] .ligne-lot-etat,
.ligne-lot[data-etat="non_envoyee"] .ligne-lot-etat {
  color: var(--rouge);
}

/* Résumé du lot : région annoncée, présente (vide) dès le chargement ; vide, elle ne prend aucune place. */
.resume-lot:empty {
  position: absolute;
}

.resume-lot-ok,
.resume-lot-probleme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-radius: 8px;
  color: var(--texte);
  font-size: 16px;
}

.resume-lot-ok {
  border-left: 4px solid var(--succes);
}

.resume-lot-probleme {
  border-left: 4px solid var(--rouge);
}

/* --- Mise en page --------------------------------------------------------------------------- */

.mise-en-page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.mise-en-page-simple {
  grid-template-columns: minmax(0, 1fr);
}

.contenu {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.entete-contenu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta {
  color: var(--texte-secondaire);
  font-size: 12px;
}

.carte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-radius: 12px;
  box-shadow: var(--ombre-carte);
}

/* --- Liste des catégories ------------------------------------------------------------------- */

.categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.categories-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.categories h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--texte);
}

/* Bouton « + » : bouton secondaire carré de 40 × 40 px, « + » en 20 px. */
.bouton-ajout {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gris);
}

.categories li {
  border-bottom: 1px solid var(--gris);
}

.categories li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border-left: 4px solid transparent;
  color: var(--texte);
  text-decoration: none;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.categories li a:hover {
  background: var(--fond-gris);
  color: var(--texte);
}

.categories li a.active {
  border-left-color: var(--rouge);
}

.pastille {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--gris);
  color: var(--texte);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.vide {
  color: var(--texte-secondaire);
  font-size: 14px;
}

/* --- Cartes d'image compactes (spec/design.md 1.5) --------------------------------------------- */

.grille-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Miniature à gauche, texte à droite ; la rangée d'actions dessous, sur toute la largeur. */
.carte-image {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  padding: 12px;
}

/* Damier en CSS seulement, derrière toutes les miniatures : une image transparente le laisse voir. */
.miniature {
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--gris);
  border-radius: 8px;
  background-color: var(--damier-clair);
  background-image: linear-gradient(45deg, var(--damier) 25%, transparent 25%), linear-gradient(-45deg, var(--damier) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--damier) 75%), linear-gradient(-45deg, transparent 75%, var(--damier) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

.miniature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* La miniature est un lien vers la page de l'image (1.11) ; le nom, à côté, est le lien accessible.
   Focus : la règle :focus-visible commune (contour rouge de 2 px décalé de 2 px). */
a.miniature {
  display: block;
}

a.miniature:hover {
  border-color: var(--texte-secondaire);
}

/* Bascule du fond (page de l'image) : libellé et groupe de liens, les liens sont plus bas. */
.bascule-fond {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.bascule-fond-libelle {
  color: var(--texte-secondaire);
  font-size: 14px;
}

.bascule-fond-boutons {
  display: flex;
}

.carte-image-texte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Nom : deux lignes au plus, coupé avec « … » (nom complet dans title). */
.nom-image {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Nom en lien vers la page de l'image : quasi-noir, souligné au survol ; focus : règle commune. */
.nom-image a {
  color: var(--texte);
  text-decoration: none;
}

.nom-image a:hover {
  text-decoration: underline;
}

/* Vignette de la confirmation de suppression d'une image. */
.vignette {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  padding: 8px;
  border-radius: 8px;
  background: var(--fond-gris);
}

.vignette img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Rangée d'actions : case de sélection (pages de catégorie), puis le bouton « URL » rond ; écart 8 px,
   alignés à gauche. */
.rangee-actions {
  --ecart-actions: 8px;
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: var(--ecart-actions);
  min-width: 0;
}

/* Case de sélection : case native de 20 px dans une étiquette de 40 × 40 px, tout entière cliquable. */
.case-selection {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--largeur-case, 40px);
  height: 40px;
  cursor: pointer;
}

.case-selection input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--rouge);
  cursor: pointer;
}

.case-selection input:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
}

/* Bouton « URL » rond (1.11) : cercle de 40 × 40 px, l'icône de chaîne de 20 px en blanc peinte comme le
   chevron (PNG en masque) ; la coche « ✓ » prend sa place 2 s, sans changer la taille du bouton. */
.bouton-url {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 9999px;
}

.icone-chaine {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--blanc);
  -webkit-mask: url("icones/chaine.png") center / contain no-repeat;
  mask: url("icones/chaine.png") center / contain no-repeat;
}

.bouton-url-copie .icone-chaine {
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: var(--blanc);
  font-size: 16px;
  line-height: 1;
}

/* Encadré d'URL (page de l'image, confirmation de suppression) : URL complète, sélectionnable. */
.encadre-url {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.url {
  display: block;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--teinte-rouge);
  color: var(--texte);
  font-family: var(--chasse-fixe);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  user-select: all;
}

/* --- Puces : chevron de marque plein, rouge, pointé à droite -------------------------------- */

.puces {
  margin: 0;
  padding: 0;
  list-style: none;
}

.puces li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.puces li + li {
  margin-top: 4px;
}

.puces li::before {
  content: "";
  flex: none;
  width: 0.7em;
  height: 0.7em;
  color: var(--rouge);
  background-color: currentColor;
  -webkit-mask: url("chevrons/chevron-full.png") center / contain no-repeat;
  mask: url("chevrons/chevron-full.png") center / contain no-repeat;
  transform: rotate(-90deg);
}

/* --- Page de connexion ---------------------------------------------------------------------- */

.page-connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}

.connexion {
  width: 100%;
  max-width: 400px;
}

.connexion .carte {
  gap: 24px;
  padding: 32px 24px;
}

.logo-connexion {
  display: block;
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* Bouton pleine largeur (page de connexion) : le libellé peut passer à la ligne sur un écran étroit
   plutôt que de déborder de la carte. */
.bouton-plein {
  width: 100%;
  white-space: normal;
  text-align: center;
}

.connexion-microsoft {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Connexion locale (poste de développement seulement) : séparateur à 24 px, titre 14 px 600. */
.connexion-locale {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--gris);
}

.connexion-locale h2 {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.connexion-locale-boutons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

/* Échec (400) et refus (403) de la connexion : encadré à bordure gauche rouge, texte 16 px. */
.encadre-erreur {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-left: 4px solid var(--rouge);
  border-radius: 8px;
  color: var(--texte);
  font-size: 16px;
}

/* --- Confirmation de suppression ------------------------------------------------------------ */

.confirmer-suppression .vignette {
  max-width: 320px;
}

/* Suppression d'une catégorie : encadré « irréversible » et case à cocher (spec/design.md 1.5). */
.encadre-irreversible {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--blanc);
  border-left: 4px solid var(--rouge);
  color: var(--texte);
  font-size: 16px;
}

.encadre-irreversible-titre {
  font-weight: 600;
}

.case-groupe {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Case native de 20 px DANS son étiquette : toute l'étiquette (au moins 40 × 40 px) coche la case
   (spec/design.md § Case de sélection) ; composant réutilisable par la case de sélection des cartes. */
.case-confirmation {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 40px;
  min-height: 40px;
  padding-left: 10px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.case-confirmation input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--rouge);
  cursor: pointer;
}

.case-confirmation input:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
}

/* En-tête d'une catégorie (1.11) : titre à gauche ; à droite, le tiroir « Envoyer des images » puis, pour un
   administrateur, la roue dentée, écart de 8 px, alignés au centre ; sous 640 px, ils passent sous le titre,
   sur la même rangée. Dans le HTML, la roue précède le tiroir (ordre du clavier, WCAG 2.4.3) : l'ordre visuel
   vient de `order`. Le tiroir ouvert prend toute la largeur, sous l'en-tête (la roue reste en haut). */
.entete-titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 8px;
}

.entete-titre h1 {
  min-width: 0;
  margin-right: auto;
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .entete-titre h1 {
    flex: 1 0 100%;
  }

  .entete-titre {
    justify-content: flex-start;
  }
}

.tiroir-envoi {
  order: 1;
  flex: 0 0 auto;
}

.tiroir-envoi[open] {
  order: 3;
  flex: 1 0 100%;
}

.tiroir-envoi summary {
  list-style: none;
  width: fit-content;
}

.tiroir-envoi summary::-webkit-details-marker {
  display: none;
}

.tiroir-envoi[open] summary {
  margin-left: auto;
}

.tiroir-envoi summary:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
}

/* Chevron de marque blanc (PNG en masque), vers le bas ; vers le haut quand le tiroir est ouvert. */
.chevron-tiroir {
  display: inline-block;
  flex: none;
  width: 0.7em;
  height: 0.7em;
  background-color: var(--blanc);
  -webkit-mask: url("chevrons/chevron-full.png") center / contain no-repeat;
  mask: url("chevrons/chevron-full.png") center / contain no-repeat;
}

.tiroir-envoi[open] .chevron-tiroir {
  transform: rotate(180deg);
}

.tiroir-contenu {
  margin-top: 12px;
}

/* Roue dentée (administrateurs) : bouton secondaire carré de 40 × 40 px, icône de 20 px peinte en masque. */
.bouton-roue {
  order: 2;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
}

.icone-engrenage {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--texte);
  -webkit-mask: url("icones/engrenage.png") center / contain no-repeat;
  mask: url("icones/engrenage.png") center / contain no-repeat;
}

/* Gérer la catégorie (1.11) : deux sections dans la carte ; la seconde, 32 px plus bas, sous une ligne. */
.section-gestion h2 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.section-gestion-suppression {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--gris);
}

.section-gestion-suppression .aide {
  margin-bottom: 12px;
}

/* --- Ajouter une catégorie (spec/design.md 1.5) ------------------------------------------------ */

.carte-formulaire {
  max-width: 480px;
}

/* Lien d'action (« Annuler ») : cible d'au moins 40 px de haut. */
.lien-action {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  min-width: 40px;
}

/* --- Page d'aide (spec/design.md 1.5) -------------------------------------------------------- */

.aide-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 720px;
}

.aide-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
}

.aide-section h2 {
  font-size: 20px;
  font-weight: 600;
}

.etapes {
  margin: 0;
  padding-left: 24px;
}

.etapes li + li {
  margin-top: 4px;
}

/* Section « Réservé aux administrateurs » : carte à bordure gauche rouge. */
.aide-admin {
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-left: 4px solid var(--rouge);
  border-radius: 12px;
  padding: 16px;
}

/* --- Écrans étroits (sous 900 px) : le titre du bandeau laisse la place à la barre ------------- */

@media (max-width: 899px) {
  .bandeau-titre {
    display: none;
  }
}

/* --- Bandeau sur deux rangées (sous 800 px) : la barre aurait moins de 150 px sur une seule ------- */

@media (max-width: 799px) {
  /* Deux rangées : logo et « Se déconnecter » (64 px), puis la barre pleine largeur. L'ordre du DOM
     (accueil, barre, déconnexion) reste celui du Tab ; `order` ne change que l'affichage. */
  .bandeau-interieur {
    flex-wrap: wrap;
    height: auto;
    row-gap: 0;
  }

  /* De 480 à 799 px, le logo rétrécit (object-fit: contain) pour que « Aide » et « Se déconnecter »
     tiennent sur la première rangée. */
  .bandeau-accueil {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    height: 64px;
  }

  .bandeau-logo {
    min-width: 0;
    max-width: 100%;
  }

  .bandeau-aide {
    order: 2;
    height: 64px;
  }

  .bandeau-interieur > .bandeau-deconnexion {
    flex: 0 0 auto;
    order: 3;
    height: 64px;
    display: flex;
    align-items: center;
  }

  .bandeau .recherche-bandeau {
    order: 4;
    flex: 0 0 100%;
    max-width: none;
    margin: 0 0 12px;
  }
}

/* --- Petits écrans (sous 640 px) ------------------------------------------------------------ */

@media (max-width: 639px) {
  .bandeau-interieur {
    padding: 0 16px;
  }

  .mise-en-page {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .grille-images {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ligne de lot : nom du fichier, champ pleine largeur, puis « Retirer » à droite ; état dessous. */
  .ligne-lot {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .ligne-lot-fichier {
    line-height: 1.5;
  }

  .ligne-lot-retirer {
    justify-self: end;
  }
}

/* --- Très petits écrans (sous 480 px) : logo à 32 px de haut (au-dessus du minimum de 24 px) -------
   Il ne rétrécit plus ; si logo, « Aide » et « Se déconnecter » ne tiennent pas sur une rangée,
   « Se déconnecter » passe à la ligne sous le logo (jamais de défilement horizontal). */

@media (max-width: 479px) {
  .bandeau-logo {
    height: 32px;
    max-width: none;
  }

  .bandeau-accueil {
    flex: 0 0 auto;
  }
}

/* --- Page de résultats de recherche ---------------------------------------------------------- */

.compte-recherche {
  color: var(--texte-secondaire);
  font-size: 14px;
}

.categorie-image {
  color: var(--texte-secondaire);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* Lien « Catégorie : » : cible d'au moins 40 px de haut (spec/design.md § Accessibilité). */
.categorie-image a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--rouge);
  text-decoration: underline;
}

/* --- Outils d'une page de catégorie (spec/design.md 1.5) : bascule, tri, déplacer la sélection ---- */

.outils-categorie {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

/* Bascule de vue : deux liens collés, rayons extérieurs de 8 px. */
.bascule-vue {
  display: flex;
  flex: 0 0 auto;
}

.bascule-lien {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--gris);
  background: var(--blanc);
  color: var(--texte);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.bascule-lien:first-child {
  border-radius: 8px 0 0 8px;
}

.bascule-lien + .bascule-lien {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.bascule-lien:hover {
  background: var(--fond-gris);
  color: var(--texte);
}

.bascule-lien[aria-current="true"] {
  border-color: var(--rouge);
  background: var(--rouge);
  color: var(--blanc);
}

.bascule-lien[aria-current="true"]:hover {
  background: var(--rouge-survol);
  color: var(--blanc);
}

/* Tri : « Trier par : » en gris, liens rouges soulignés ; le tri courant en quasi-noir 600, non souligné. */
.tri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  font-size: 14px;
}

.tri-libelle {
  color: var(--texte-secondaire);
}

.lien-tri {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 40px;
  min-height: 40px;
  color: var(--rouge);
  text-decoration: underline;
}

.lien-tri[aria-current="true"] {
  font-weight: 600;
  color: var(--texte);
  text-decoration: none;
}

/* Chevron de marque plein, 0,7 em : vers le haut (A → Z, plus ancienne d'abord), vers le bas sinon. */
.chevron-tri {
  display: inline-block;
  flex: none;
  width: 0.7em;
  height: 0.7em;
  margin-left: 4px;
  color: var(--rouge);
  background-color: currentColor;
  -webkit-mask: url("chevrons/chevron-full.png") center / contain no-repeat;
  mask: url("chevrons/chevron-full.png") center / contain no-repeat;
}

.chevron-haut {
  transform: rotate(180deg);
}

/* Groupe de sélection (spec/design.md 1.10) : sa propre rangée, sous la bascule et le tri (à côté du tri,
   il se coupait en deux à 1 280 px, mesuré le 2026-11-04) ; « Tout sélectionner », liste, « Déplacer »,
   « Supprimer la sélection », qui passent à la ligne au besoin. */
.outils-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
}

.outils-selection .champ-groupe {
  flex: 0 1 240px;
  min-width: 0;
}

.outils-selection .champ-groupe label {
  font-size: 14px;
}

/* Messages (rien de coché, trop d'images) : sous le groupe, sur toute sa largeur. */
.outils-selection .erreur,
.outils-selection .avis-selection {
  flex: 1 1 100%;
}

/* L'étiquette et l'avis ont leur propre display : sans cette règle, hidden ne les cacherait pas. */
.avis-selection[hidden],
.case-tout[hidden] {
  display: none;
}

/* « Tout sélectionner » : case native de 20 px dans une étiquette de 40 px de haut, tout entière cliquable. */
.case-tout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.case-tout input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--rouge);
  cursor: pointer;
}

.case-tout input:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
}

/* Confirmation de suppression de plusieurs images : une rangée par image, miniature de 40 px et nom. */
.liste-a-supprimer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-a-supprimer li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

/* Ici le nom n'est jamais tronqué (la carte le coupe à deux lignes) : on doit savoir ce qu'on supprime. */
.liste-a-supprimer .nom-image {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* --- Vue en liste (spec/design.md 1.5) : le tableau défile dans son cadre, jamais la page ---------- */

/* position: relative : les textes masqués (lecteur-seulement, positionnés en absolu) des cellules
   restent dans le cadre ; sans elle, ceux de la dernière colonne élargissaient la page à 375 px. */
.tableau-cadre {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--gris);
  border-radius: 8px;
}

.tableau-images {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--texte);
}

.tableau-images thead td,
.tableau-images thead th {
  background: var(--fond-gris);
  font-weight: 600;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
}

/* En-têtes triables : quasi-noir souligné (ni rouge ni gris sur ce fond). */
.lien-entete {
  display: inline-flex;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
  color: var(--texte);
  text-decoration: underline;
}

.lien-entete:hover {
  color: var(--texte);
}

.tableau-images thead th[aria-sort] .chevron-tri {
  vertical-align: middle;
}

.tableau-images td,
.tableau-images tbody th {
  padding: 8px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--gris);
  text-align: left;
}

.tableau-images tbody tr {
  height: 56px;
}

.tableau-images tbody tr:last-child td,
.tableau-images tbody tr:last-child th {
  border-bottom: 0;
}

.tableau-images tbody tr:hover {
  background: rgba(216, 212, 211, 0.2);
}

.tableau-images .col-case {
  width: 48px;
  padding: 4px;
}

.tableau-images .col-miniature {
  width: 56px;
}

.tableau-images tbody .col-nom {
  font-weight: 600;
  overflow-wrap: anywhere;
  min-width: 120px;
}

.tableau-images .col-dimensions,
.tableau-images .col-date {
  color: var(--texte-secondaire);
  white-space: nowrap;
}

.tableau-images thead .col-dimensions,
.tableau-images thead .col-date {
  color: var(--texte);
}

.miniature-liste {
  width: 40px;
  height: 40px;
}

/* Dernière colonne : le bouton « URL » rond (40 px) au bout de la ligne ; en-tête vide. */
.tableau-images .col-actions {
  width: 64px;
}

@media (max-width: 639px) {
  /* La liste sur sa propre rangée, pleine largeur ; « Déplacer » et « Supprimer la sélection » dessous. */
  .outils-selection .champ-groupe {
    flex: 1 1 100%;
  }
}

/* --- Page de l'image (spec/design.md 1.11) ---------------------------------------------------
   Contenu de 800 px au plus. La zone de l'image reprend celle de l'aperçu agrandi (1.9) : damier aux
   cases de 12 px ; « Clair » et « Foncé » remplacent le damier (`?fond=`, sans script). */
.page-image {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 800px;
  min-width: 0;
}

.entete-image h1 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.meta-image {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  color: var(--texte-secondaire);
  font-size: 14px;
}

.meta-image a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.bloc-image {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bloc-image .bascule-fond {
  margin-top: 0;
}

.zone-image {
  height: min(60vh, 480px);
  padding: 16px;
  border: 1px solid var(--gris);
  border-radius: 8px;
  background-color: var(--damier-clair);
  background-image: linear-gradient(45deg, var(--damier) 25%, transparent 25%), linear-gradient(-45deg, var(--damier) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--damier) 75%), linear-gradient(-45deg, transparent 75%, var(--damier) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.zone-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zone-image[data-fond="clair"] {
  background: var(--blanc);
}

.zone-image[data-fond="fonce"] {
  background: var(--texte);
}

/* Bascule du fond en liens (la page de l'image) : mêmes valeurs que les boutons de l'aperçu de la 1.9. */
.bascule-fond a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--gris);
  background: var(--blanc);
  color: var(--texte);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.bascule-fond a + a {
  border-left: 0;
}

.bascule-fond a:first-child {
  border-radius: 8px 0 0 8px;
}

.bascule-fond a:last-child {
  border-radius: 0 8px 8px 0;
}

.bascule-fond a:hover {
  background: var(--fond-gris);
  color: var(--texte);
}

/* Après :hover, à spécificité égale : le choix courant garde son rouge au survol. */
.bascule-fond a[aria-current="true"] {
  border-color: var(--rouge);
  background: var(--rouge);
  color: var(--blanc);
}

/* Rangée de copie : l'encadré d'URL pleine largeur, puis « URL » et « Télécharger » dessous. */
.rangee-copie {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rangee-copie-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Une section par geste : titre de 16 px, champs de 480 px au plus. */
.section-geste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-geste h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.section-geste .champ-groupe {
  max-width: 480px;
}

@media (max-width: 639px) {
  .zone-image {
    height: min(50vh, 360px);
    padding: 8px;
  }
}