:root {
  --fond: #f6f4ef; --carte: #ffffff; --texte: #1d1c1a; --discret: #77736b; --bord: #e4e0d7;
  --accent: #d2632a; --accent-doux: #fbe9de; --vert: #2f7d4f; --vert-doux: #e1f1e6;
  --orange: #b7791f; --orange-doux: #fbf0d9; --bleu: #2f5d9c; --bleu-doux: #e1eaf6; --rouge: #b42d2d;
  --rayon: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #161513; --carte: #22201d; --texte: #efebe3; --discret: #9b968c; --bord: #35322d;
    --accent-doux: #3a2618; --vert-doux: #1c3326; --orange-doux: #36290f; --bleu-doux: #1b2638;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 -apple-system, "Segoe UI", system-ui, Roboto, sans-serif; }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
a { color: inherit; text-decoration: none; }
h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -0.02em; }
h2 { font-size: 16px; margin: 0 0 10px; }
.discret { color: var(--discret); }

.barre { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--carte); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 5; }
.logo { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.logo.grand { font-size: 30px; justify-content: center; }
.logo-point { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 6px 0 0 -2px var(--accent-doux); }
.barre nav { display: flex; gap: 4px; }
.barre nav a { padding: 6px 12px; border-radius: 999px; }
.barre nav a.actif { background: var(--accent-doux); color: var(--accent); font-weight: 600; }
.pastille { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; margin-left: 6px; }

.etat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 1200px; margin: 12px auto 0; padding: 0 16px; font-size: 14px; }
.etat form { margin-left: auto; }
.voyant { width: 9px; height: 9px; border-radius: 50%; background: var(--vert); }
.voyant.tourne { background: var(--accent); animation: pulse 1s infinite alternate; }
.voyant.rouge { background: var(--rouge); }
@keyframes pulse { to { opacity: .3; } }

.alerte, .flash { max-width: 1168px; margin: 12px auto 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.alerte { background: var(--orange-doux); color: var(--orange); }
.flash { background: var(--vert-doux); color: var(--vert); }

.bouton { border: 0; border-radius: 999px; padding: 10px 18px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.bouton.petit { padding: 5px 12px; font-size: 13px; }
.bouton.secondaire { background: var(--carte); color: var(--texte); border: 1px solid var(--bord); }
.bouton.danger { background: var(--rouge); }
input, select { font: inherit; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); }

.connexion { max-width: 340px; margin: 18vh auto 0; text-align: center; }
.connexion form { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 16px; }
.stats div { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 14px; }
.stats b { display: block; font-size: 24px; letter-spacing: -0.02em; }
.stats span { color: var(--discret); font-size: 13px; }

.filtres { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
.filtres a { white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bord); background: var(--carte); font-size: 14px; }
.filtres a.actif { background: var(--texte); color: var(--fond); border-color: var(--texte); }

.grille-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.carte-album { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; transition: transform .15s; }
.carte-album:hover { transform: translateY(-2px); }
.carte-album img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--bord); }
.carte-texte { padding: 10px 12px 12px; }
.carte-nom { font-weight: 600; }
.etiquettes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.etiquette { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--fond); color: var(--discret); white-space: nowrap; }
.etiquette.vert { background: var(--vert-doux); color: var(--vert); }
.etiquette.orange { background: var(--orange-doux); color: var(--orange); }
.etiquette.bleu { background: var(--bleu-doux); color: var(--bleu); }

.journal { margin-top: 28px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; font-size: 13px; }
.journal div { padding: 3px 0; }
.vide { text-align: center; color: var(--discret); padding: 40px 0; }

.retour { display: inline-block; color: var(--discret); margin-bottom: 10px; }
.entete-album { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.entete-album p { margin: 6px 0 0; max-width: 700px; }
.chemin { font-size: 12px; word-break: break-all; }
.renommer { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.renommer input { flex: 1; min-width: 200px; }

.grille-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 14px; }
.vignette { position: relative; }
.vignette img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 8px; background: var(--bord); }
.badge { position: absolute; top: 6px; left: 6px; font-size: 11px; background: var(--accent); color: #fff; padding: 1px 7px; border-radius: 999px; }

.groupe { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; margin-bottom: 14px; }
.raison { margin: 6px 0 0; color: var(--accent); font-size: 14px; }
.choix { display: flex; gap: 10px; overflow-x: auto; padding: 12px 0; }
.choix-photo { position: relative; flex: 0 0 auto; cursor: pointer; }
.choix-photo input { position: absolute; opacity: 0; }
.choix-photo img { width: 180px; height: 180px; object-fit: cover; border-radius: 10px; display: block; opacity: .55; border: 3px solid transparent; transition: .15s; }
.choix-photo input:checked ~ img { opacity: 1; border-color: var(--vert); }
.garder { display: none; position: absolute; bottom: 8px; left: 8px; background: var(--vert); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.choix-photo input:checked ~ .garder { display: block; }
.loupe { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .barre { padding: 10px 12px; }
  .barre .logo-texte { display: none; }
  .barre nav { gap: 0; overflow-x: auto; }
  .barre nav a { padding: 6px 9px; font-size: 14px; white-space: nowrap; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grille-albums { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .grille-photos { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .choix-photo img { width: 140px; height: 140px; }
  .entete-album { flex-direction: column; }
  h1 { font-size: 22px; }
}

.reglages { max-width: 760px; }
.bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.bloc label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bloc label.case { flex-direction: row; align-items: center; gap: 8px; }
.bloc textarea { font: inherit; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.verif { margin: -4px 0 0; font-size: 13px; word-break: break-all; color: var(--discret); }
.verif.ok { color: var(--vert); }
.verif.ko { color: var(--rouge); }
.petit { font-size: 13px; }
.etiquette-champ { margin: 4px 0 0; font-size: 14px; }
.choix-boutons { display: flex; gap: 6px; flex-wrap: wrap; }
.choix-boutons label { flex-direction: row; }
.choix-boutons input { position: absolute; opacity: 0; }
.choix-boutons span { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--bord); cursor: pointer; }
.choix-boutons input:checked + span { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.choix-boutons input:focus-visible + span { outline: 2px solid var(--accent); }
.connexion p { margin: 10px 0; }