/* Danzapa : style de base, inspiré de PowerPoint Web. */

:root {
  --accent: #c43e1c;          /* rouge PowerPoint */
  --accent-fonce: #a33416;
  --fond: #f3f2f1;
  --surface: #ffffff;
  --texte: #242424;
  --texte-doux: #616161;
  --bordure: #e1dfdd;
  --rayon: 6px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
}

/* Barre de titre */
.barre-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}
.barre-titre { flex-wrap: wrap; row-gap: 0.25rem; }
.barre-titre-droite { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .barre-titre { padding: 0.5rem; }
  .barre-titre-droite { gap: 0.1rem; margin-left: auto; }
  .bouton-lien { padding: 0.3rem 0.4rem; font-size: 0.85rem; }
}
.barre-titre-droite form { margin: 0; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--texte);
  text-decoration: none;
}
.logo-icone {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.logo-grand { font-size: 1.5rem; justify-content: center; width: 100%; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--bordure);
  font-size: 0.8rem;
  font-weight: 600;
}

.bouton-lien {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--texte);
  text-decoration: none;
  cursor: pointer;
}
.bouton-lien:hover { background: var(--fond); border-color: var(--bordure); }

.bouton-principal {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--rayon);
  padding: 0.6rem 1.2rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bouton-principal:hover { background: var(--accent-fonce); }

/* Contenu */
.contenu { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
h1 { margin: 0 0 0.25rem; font-weight: 600; }
.sous-titre { color: var(--texte-doux); margin: 0 0 1.5rem; }

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
}
.carte h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.carte p { color: var(--texte-doux); margin: 0 0 0.75rem; }
.carte-bientot { opacity: 0.85; }
.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--fond);
  color: var(--texte-doux);
}

/* Messages */
.message {
  padding: 0.6rem 0.9rem;
  border-radius: var(--rayon);
  background: #e8f1fb;
}
.message-error { background: #fde7e9; color: #a4262c; }
.message-success { background: #dff6dd; }

/* Formulaires */
.formulaire { max-width: 420px; }
.formulaire input,
.boite-connexion input[type="text"],
.boite-connexion input[type="password"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
}
.formulaire .helptext, .formulaire ul { color: var(--texte-doux); font-size: 0.85rem; }

/* Navigation */
.barre-titre-gauche { display: flex; align-items: center; gap: 1.25rem; }
.onglet {
  color: var(--texte);
  text-decoration: none;
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.onglet:hover { border-bottom-color: var(--bordure); }
.onglet-actif { font-weight: 600; border-bottom-color: var(--accent); }

/* Boutons secondaires */
.bouton-secondaire, .bouton-danger {
  display: inline-block;
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.55rem 1rem;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.bouton-secondaire:hover { background: var(--fond); }
.bouton-danger { background: #a4262c; border-color: #a4262c; color: #fff; font-weight: 600; }
.bouton-danger:hover { background: #8a1f24; }
a.bouton-principal { text-decoration: none; }

.entete-page {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.actions { display: flex; gap: 0.5rem; align-items: center; }

a.carte-lien { color: inherit; text-decoration: none; }
a.carte-lien:hover { border-color: var(--accent); }
.badge-actif { background: var(--accent); color: #fff; }

/* Bibliothèque */
.recherche { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.recherche input {
  flex: 1 1 280px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
}

.liste-chants {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.liste-chants li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bordure);
}
.liste-chants li:last-child { border-bottom: none; }
.liste-chants li > a { color: inherit; text-decoration: none; display: grid; gap: 0.15rem; min-width: 0; }
.liste-chants li > a:hover .liste-titre { color: var(--accent); }
.liste-titre { font-weight: 600; }
.liste-meta, .liste-extrait { font-size: 0.85rem; color: var(--texte-doux); }
.liste-extrait { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tags { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.tag {
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #fbe9e4;
  color: var(--accent-fonce);
  text-decoration: none;
  margin-left: 0.3rem;
}
.pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }
.vide { color: var(--texte-doux); }
.meta-bas { color: var(--texte-doux); font-size: 0.85rem; margin-top: 1.5rem; }

/* Aperçu des couplets façon diapositive (thème par défaut : blanc sur noir) */
.apercu-couplets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.apercu { margin: 0; }
.apercu figcaption { font-size: 0.8rem; color: var(--texte-doux); margin-bottom: 0.3rem; }
.diapo {
  aspect-ratio: 16 / 9;
  background: #000;
  color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  padding: 0.75rem;
  overflow: hidden;
}
.diapo p { margin: 0; }

/* Formulaire de chant */
.formulaire-chant {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 720px) {
  .formulaire-chant { grid-template-columns: 1fr; }
}
.formulaire-chant .message { grid-column: 1 / -1; }
.champ { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.champ label { font-weight: 600; font-size: 0.9rem; }
.champ small { color: var(--texte-doux); font-size: 0.8rem; }
.champ small.erreur { color: #a4262c; }
.champ input, .champ textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
}
.champ textarea { line-height: 1.5; resize: vertical; }

/* Page de connexion */
.page-connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.boite-connexion {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
}
.boite-connexion .sous-titre { text-align: center; }
.boite-connexion label { font-size: 0.9rem; margin-top: 0.5rem; }
.boite-connexion .bouton-principal { margin-top: 1rem; }

/* ================================================================
   Cultes : liste
   ================================================================ */
.creation-rapide { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.creation-rapide input {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
}
.titre-section { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.liste-cultes {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.liste-cultes li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bordure);
}
.liste-cultes li:last-child { border-bottom: none; }
.liste-cultes a { color: inherit; text-decoration: none; display: grid; gap: 0.15rem; }
.liste-cultes a:hover .liste-titre { color: var(--accent); }
.badge-pret { background: #dff6dd; color: #107c10; }

.utilisations { margin-top: 1.5rem; }
.utilisations h2 { font-size: 1rem; margin: 0 0 0.4rem; }
.utilisations ul { margin: 0; padding-left: 1.2rem; }

/* ================================================================
   Diapositives : même rendu en vignette et en grand.
   Les tailles de texte suivent la largeur de la diapo (unités cqw).
   Thème par défaut : blanc gras sur noir, comme la présentation actuelle.
   ================================================================ */
.diapo {
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: var(--fond-couleur, #000);
  background-image: var(--fond-image, none);
  background-size: 100% 100%;
  color: var(--texte-couleur, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.diapo-contenu {
  width: 90%;
  text-align: center;
  font-family: var(--police, Calibri, Carlito, sans-serif);
  font-weight: var(--poids, 700);
  line-height: 1.2;
}
/* --taille : calculée côté serveur (apps/projection/rendu.py), comme pour le .pptx */
.diapo-contenu p { margin: 0; font-size: var(--taille, 5.6cqw); overflow-wrap: anywhere; }
.diapo-titre .diapo-contenu {
  font-family: var(--police-titres, Georgia, serif);
  text-transform: var(--casse-titre, uppercase);
}
.diapo-bienvenue { background-image: var(--bienvenue-image, var(--fond-image, none)); }
.diapo-bienvenue .diapo-contenu {
  width: 84%;
  min-height: 44%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bandeau, #8f8f8f);
  box-shadow: 0 -1.2cqw 0 -0.8cqw #c8c8c8, 0 1.2cqw 0 -0.8cqw #c8c8c8;
  font-family: var(--police-titres, Georgia, serif);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.05;
}
/* Une image de bienvenue remplace toute la diapo, texte compris. */
.avec-image-bienvenue .diapo-bienvenue .diapo-contenu { visibility: hidden; }
.diapo-masquee { opacity: 0.35; }
.diapo-vide { background: #2b2b2b; }
.diapo-vide::after { content: "Aucune diapo"; color: #bbb; font-size: 3cqw; }

/* ================================================================
   Éditeur (disposition PowerPoint Web)
   ================================================================ */
main.editeur {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 49px);
  min-height: 480px;
}
main.editeur > .message { margin: 0.5rem 1rem 0; }

.barre-culte {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  background: var(--surface);
  flex-wrap: wrap;
}
.form-titre { flex: 0 1 26rem; min-width: 10rem; }
.titre-culte {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  padding: 0.3rem 0.5rem;
  background: transparent;
  margin: 0;
}
input.titre-culte:hover, input.titre-culte:focus { border-color: var(--bordure); background: var(--fond); }
.statut-choix { font: inherit; font-size: 0.85rem; padding: 0.25rem 0.4rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
.date-culte { color: var(--texte-doux); font-size: 0.9rem; }
.indicateur { margin-left: auto; font-size: 0.85rem; color: #107c10; }
.indicateur-erreur { color: #a4262c; }

/* Ruban */
.ruban { background: var(--surface); border-bottom: 1px solid var(--bordure); padding: 0 1rem 0.5rem; }
.ruban-onglets { display: flex; gap: 0.25rem; overflow-x: auto; }
.ruban-onglets button {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.ruban-onglets button:hover { background: var(--fond); }
.ruban-onglets button.actif { font-weight: 600; border-bottom-color: var(--accent); }
.ruban-panneau {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  background: var(--fond);
  border-radius: 8px;
  padding: 0.35rem;
  margin-top: 0.35rem;
  overflow-x: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.ruban-panneau[hidden] { display: none; }
.ruban-groupe {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0 0.5rem 1.1rem;
  border-right: 1px solid var(--bordure);
  position: relative;
  flex-shrink: 0;
}
.ruban-groupe:last-child { border-right: none; }
.ruban-libelle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  color: var(--texte-doux);
  white-space: nowrap;
}
.outil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 4.2rem;
  max-width: 7rem;
  padding: 0.3rem 0.45rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.15;
  text-align: center;
  color: var(--texte);
  text-decoration: none;
  cursor: pointer;
}
.outil:hover:not(:disabled) { background: var(--surface); border-color: var(--bordure); }
.outil.actif { background: #fbe9e4; border-color: #f0c4b8; }
.outil:disabled { opacity: 0.4; cursor: default; }
.outil-icone { font-size: 1.25rem; line-height: 1.2; color: var(--accent); }
.ruban-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; }
.ruban-form textarea { width: 18rem; font: inherit; font-size: 0.85rem; padding: 0.3rem; border: 1px solid var(--bordure); border-radius: 4px; resize: vertical; }
.ruban-form input { width: 5rem; font: inherit; padding: 0.3rem; border: 1px solid var(--bordure); border-radius: 4px; }

/* Espace de travail : vignettes | diapo + propriétés, barre d'état en bas */
.espace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 230px 1fr;
  grid-template-rows: 1fr auto;
  background: var(--fond);
}
.vignettes {
  overflow-y: auto;
  padding: 0.75rem 0.75rem 1.5rem 0.5rem;
  border-right: 1px solid var(--bordure);
}
.groupe { margin-bottom: 0.4rem; border-radius: 6px; }
.groupe-entete {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--texte-doux);
  padding: 0.15rem 0.2rem 0.15rem 1.6rem;
  cursor: grab;
  user-select: none;
}
.groupe-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poignee { color: #a19f9d; }
.groupe-masque .groupe-nom { text-decoration: line-through; }
.sortable-ghost { opacity: 0.4; background: #fbe9e4; }
.vignette {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  padding: 0.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.vignette-numero { width: 1.2rem; font-size: 0.75rem; color: var(--texte-doux); text-align: right; flex-shrink: 0; }
.vignette .diapo { border: 2px solid transparent; border-radius: 5px; box-shadow: 0 0 0 1px var(--bordure); }
.vignette:hover .diapo { border-color: #d6d6d6; }
.vignette.active .diapo { border-color: var(--accent); }
.vignettes-vide { font-size: 0.85rem; color: var(--texte-doux); text-align: center; margin-top: 1rem; }

.centre { overflow-y: auto; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.scene { width: 100%; max-width: min(960px, calc((100vh - 330px) * 16 / 9)); min-width: 280px; margin: 0 auto; }
.diapo-grande { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }

.proprietes-zone { max-width: 960px; width: 100%; margin: 0 auto; }
.proprietes {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.75rem 1rem;
}
.proprietes h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.proprietes h2 small { font-weight: 400; color: var(--texte-doux); font-size: 0.8rem; margin-left: 0.3rem; }
.form-proprietes { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end; }
.form-proprietes label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.form-proprietes label.large { flex-basis: 100%; }
.form-proprietes label.case { flex-direction: row; align-items: center; gap: 0.4rem; padding-bottom: 0.4rem; }
.form-proprietes input:not([type=checkbox]), .form-proprietes textarea {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: 4px;
  min-width: 14rem;
}
.form-proprietes textarea { width: 100%; }
.form-proprietes small, .aide { color: var(--texte-doux); font-size: 0.8rem; }
.actions-element { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.actions-element .bouton-secondaire { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.bouton-retirer { color: #a4262c; }

.barre-etat {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.25rem 1rem;
  font-size: 0.8rem;
  color: var(--texte-doux);
  background: var(--surface);
  border-top: 1px solid var(--bordure);
}
.barre-etat-droite { margin-left: auto; display: flex; gap: 0.25rem; }
.bouton-vue { background: none; border: 1px solid transparent; border-radius: 4px; font: inherit; padding: 0.15rem 0.5rem; cursor: pointer; color: inherit; }
.bouton-vue:hover { background: var(--fond); }
.bouton-vue.actif { background: #fbe9e4; border-color: #f0c4b8; color: var(--texte); }

/* Trieuse de diapositives : toutes les vignettes en grille */
.vue-trieuse { grid-template-columns: 1fr; }
.vue-trieuse .centre { display: none; }
.vue-trieuse .vignettes { border-right: none; padding: 1rem 1.5rem; }
.vue-trieuse .groupe-fixe, .vue-trieuse .groupe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5rem 0.75rem;
  padding: 0.25rem;
}
.vue-trieuse .groupe { background: rgba(0, 0, 0, 0.02); }
.vue-trieuse .groupe-entete { grid-column: 1 / -1; padding-left: 0.2rem; }

/* Dialogues */
.dialogue {
  width: min(560px, calc(100vw - 2rem));
  border: none;
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.dialogue::backdrop { background: rgba(0, 0, 0, 0.35); }
.dialogue-entete { display: flex; justify-content: space-between; align-items: center; }
.dialogue h2 { font-size: 1.1rem; margin: 0; }
.dialogue label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; margin-top: 0.75rem; }
.dialogue input, .dialogue textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.dialogue small { font-weight: 400; color: var(--texte-doux); }
.dialogue .bouton-principal { margin-top: 1rem; }
.resultats-chants { max-height: 320px; overflow-y: auto; margin-top: 0.75rem; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.liste-resultats { list-style: none; margin: 0; padding: 0; }
.resultat {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--bordure);
  padding: 0.55rem 0.75rem;
  font: inherit;
  cursor: pointer;
}
.resultat:hover, .resultat:focus { background: #fbe9e4; outline: none; }
.resultats-chants .vide { padding: 0.75rem; margin: 0; }

/* Téléphone : vignettes en bandeau horizontal au-dessus de la diapo */
@media (max-width: 760px) {
  main.editeur { height: auto; }
  .masque-mobile { display: none; }
  .espace { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .vignettes {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--bordure);
    padding: 0.5rem;
  }
  .groupes, .groupe, .groupe-fixe { display: flex; gap: 0.25rem; margin: 0; }
  .groupe-entete { display: none; }
  .vignette { width: 120px; flex-shrink: 0; }
  .vignettes-vide { margin: 0.5rem; }
  .centre { padding: 0.75rem; }
  .scene { min-width: 0; max-width: 100%; }
  .form-proprietes input:not([type=checkbox]) { min-width: 0; width: 100%; }
  .form-proprietes label { flex: 1 1 100%; }
  .vue-trieuse .vignettes { display: block; }
  .vue-trieuse .groupes { display: block; }
  .vue-trieuse .groupe, .vue-trieuse .groupe-fixe { display: grid; grid-template-columns: repeat(2, 1fr); }
  .vue-trieuse .vignette { width: auto; }
}

.ruban-form select { font: inherit; font-size: 0.85rem; padding: 0.3rem; border: 1px solid var(--bordure); border-radius: 4px; background: var(--surface); }
.lien-themes { font-size: 0.78rem; padding: 0.2rem 0.3rem; align-self: flex-end; }

/* ================================================================
   Thèmes
   ================================================================ */
.grille-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.carte-theme {
  display: grid;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.75rem;
  color: var(--texte);
  text-decoration: none;
}
.carte-theme:hover { border-color: var(--accent); }
.carte-theme .diapo { border-radius: 3px; }
.carte-theme-nom { font-weight: 600; }
.formulaire-theme {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.3fr;
  gap: 1.5rem;
  align-items: start;
}
.formulaire-theme .message { grid-column: 1 / -1; }
.formulaire-theme input[type=color] { width: 4rem; height: 2.2rem; padding: 0.1rem; }
.formulaire-theme select, .formulaire-theme input[type=number] {
  font: inherit;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  max-width: 16rem;
}
.champ-case { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.champ-case small { flex-basis: 100%; }
.colonne-apercu { position: sticky; top: 1rem; }
.apercu-theme { display: grid; gap: 0.75rem; }
.apercu-theme .diapo { border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
@media (max-width: 760px) {
  .formulaire-theme { grid-template-columns: 1fr; }
  .colonne-apercu { position: static; order: -1; }
}
.champ-case input { width: auto; order: -1; }
.champ-case label { font-weight: 600; }