:root { --vert:#286447; --clair:#e9f2eb; --bord:#bdcfc1; }
body { margin:0; font:15px Arial,sans-serif; color:#27352c; background:#fff; }
header, footer { padding:14px 3%; background:var(--vert); color:white; }
header h1 { margin:0 0 12px; font-size:24px; }
nav a { color:white; margin-right:17px; text-decoration:none; }
nav a:hover { text-decoration:underline; }
main { margin:22px auto; width:94%; max-width:1300px; min-height:65vh; }
h2 { color:var(--vert); } a { color:#276446; } .outils { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; align-items:center; }
input, select, textarea, button { font:inherit; padding:6px; } button { cursor:pointer; }
button, .bouton { background:var(--vert); border:1px solid var(--vert); color:white; padding:7px 12px; text-decoration:none; }
table { border-collapse:collapse; width:100%; } th, td { border:1px solid var(--bord); padding:8px; text-align:left; vertical-align:top; }
th { background:var(--clair); } tr:nth-child(even) { background:#f8faf8; }
label { display:block; margin:10px 0; } label input, label select { margin-left:8px; } .message { padding:10px; background:var(--clair); }
fieldset { margin:16px 0; border:1px solid var(--bord); } .actions a { margin-right:10px; }
.pochette { width:90px; max-height:90px; object-fit:contain; } .fiche-image { max-width:280px; max-height:280px; }
@media(max-width:650px) { table { font-size:12px; } th,td { padding:4px; } nav a { display:inline-block; margin:5px; } }

/* Miniatures des pochettes dans les résultats et les fiches */
.mini-pochette { width: 65px; height: 65px; object-fit: contain; vertical-align: middle; }

/* V0.2.4 : images agrandies et tableau de saisie */
.image-zoom { cursor: zoom-in; }
.visionneuse-images img { max-width: 75vw; max-height: 78vh; object-fit: contain; vertical-align: middle; }
#tableau-pistes input { max-width: 100%; box-sizing: border-box; }
[data-admin-col][hidden] { display: none; }

/* V0.2.5 : galerie de la fiche et pochettes du catalogue */
.colonne-pochette { width: 76px; text-align: center; vertical-align: middle; }
.colonne-pochette .mini-pochette { width: 58px; height: 58px; object-fit: contain; }
.fiche-album-entete { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 30px; margin: 18px 0 28px; }
.fiche-album-galerie { flex: 0 1 340px; max-width: 100%; }
.fiche-pochette-principale { display: block; width: 100%; max-width: 340px; max-height: 340px; object-fit: contain; background: #f8faf8; border: 1px solid var(--bord); box-sizing: border-box; }
.fiche-indication-image { font-size: 12px; color: #667568; text-align: center; margin: 8px 0; }
.fiche-album-miniatures { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fiche-miniature { background: #fff; border: 2px solid var(--bord); padding: 3px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }
.fiche-miniature.selectionnee { border-color: var(--vert); }
.fiche-miniature img { width: 100%; height: 100%; object-fit: contain; }
.fiche-album-informations { flex: 1 1 280px; }
.fiche-album-informations h3 { margin-top: 0; }
.fiche-album-informations p { margin: 9px 0; }

/* V0.2.6 : corbeille dans les actions existantes */
.formulaire-suppression { display: inline; margin: 0; }
.formulaire-suppression button { background: transparent; border: 0; color: inherit; padding: 0 4px; font: inherit; cursor: pointer; }
.actions-fiche { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* V0.2.7 : visionneuse sobre, totaux et commandes compactes */
.recapitulatif { margin: 14px 0; padding: 10px 12px; background: var(--clair); border: 1px solid var(--bord); }
.bouton-icone { padding: 4px 7px; font-size: 16px; line-height: 1.2; min-width: 32px; }
[data-images-col][hidden] { display: none; }
.visionneuse-images { width: min(850px, 94vw); max-width: 94vw; max-height: 92vh; padding: 0; border: 0; border-radius: 8px; background: #1b1c1e; color: #fff; box-shadow: 0 16px 65px #0009; }
.visionneuse-images::backdrop { background: rgba(0,0,0,.84); }
.visionneuse-entete { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid #555; }
.visionneuse-images button { background: transparent; color: #fff; border: 0; padding: 7px 12px; }
.visionneuse-images button:hover { background: #ffffff25; }
.visionneuse-corps { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 250px; padding: 12px; }
.visionneuse-corps img { display: block; width: auto; height: auto; max-width: calc(100% - 100px); max-height: 60vh; object-fit: contain; margin: auto; }
.visionneuse-corps > button { font-size: 24px; }
.visionneuse-bas { text-align: center; padding: 8px 12px 12px; }
.visionneuse-miniatures { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.visionneuse-miniatures button { padding: 2px; border: 2px solid transparent; }
.visionneuse-miniatures button.selectionnee { border-color: #82c9a2; }
.visionneuse-miniatures img { display: block; width: 48px; height: 48px; object-fit: contain; }

/* Commandes identiques aux icônes de la colonne Actions : aucun encadrement */
button.icone-action { background: transparent; border: 0; color: inherit; padding: 0 4px; font: inherit; cursor: pointer; }

/* Gestion des images : commandes discrètes, sans nouveaux boutons encadrés. */
.galerie-image-editable { display: inline-flex; align-items: center; gap: 8px; margin: 6px; vertical-align: top; cursor: grab; }
.galerie-image-editable > img { width: 75px; height: 75px; object-fit: contain; }
.commandes-image { display: flex; flex-direction: column; gap: 8px; }
.commandes-image label { display: inline-flex; margin: 0; cursor: pointer; }
.commandes-image input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.etoile-image::before { content: '☆'; font-size: 23px; color: #555; }
.choix-image:checked + .etoile-image::before { content: '★'; color: #e5b100; }
.suppression-image:checked + .corbeille-image { opacity: .4; text-decoration: line-through; }
.commandes-image input:focus-visible + span { outline: 2px solid var(--vert); }

/* Recherche Internet : alignement simple, limité à cette page. */
.recherche-albums fieldset { padding: 14px 18px; }
.recherche-albums-tableau { overflow-x: auto; margin: 12px 0 22px; }
.recherche-albums-tableau form { margin: 0 0 8px; }
.recherche-albums-tableau td { overflow-wrap: anywhere; }

/* Formulaires : libellé à gauche, saisie à droite (album et recherche). */
.champ-ligne { display:grid; grid-template-columns:220px max-content; align-items:center; gap:12px; margin:10px 0; }
.champ-ligne input, .champ-ligne select, .champ-ligne textarea { margin-left:0; max-width:100%; box-sizing:border-box; }
.champ-ligne textarea { width:min(520px, 100%); }
@media (max-width:650px) { .champ-ligne { grid-template-columns:1fr; gap:4px; } .champ-ligne input, .champ-ligne select { max-width:100%; } }