/* Page « préparer » v3 (Mac) : clair et calme. Fond papier, encre, Fredoka ; un bouton principal (bleu --agir)
   par zone ; peu de cadres. L'éditeur est une feuille claire ; la question ouverte dans la liste y est
   accrochée comme un onglet. Éditeur et aperçu : css/preparer-editeur.css. Identités D34 : css/base.css. */

body.preparer {
  --fond: #fdf6e3;
  --fond-creux: #f4ebd3;
  --feuille: #fffdf8;
  --encre: #1f2933;
  --encre-douce: #5b6770;
  --encre-pale: #8a949b;
  --filet: #e6dcc3;
  --filet-fort: #d6c9a8;
  --survol: rgba(31, 41, 51, 0.06);
  --ombre-douce: 0 1px 2px rgba(31, 41, 51, 0.08), 0 8px 24px rgba(31, 41, 51, 0.1);
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}

.preparer :focus-visible { outline: 3px solid var(--agir); outline-offset: 2px; }
.preparer h1, .preparer h2, .preparer h3 { margin: 0; font-weight: 600; }
.preparer kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--filet-fort);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--feuille);
  font: inherit;
  font-size: 0.85em;
  text-align: center;
}

/* ---------- Boutons : ceux de base.css (.btn, .btn-principal, .btn-secondaire ; body.sur-papier) ----------
   + deux boutons calmes propres à la page : .btn-discret (texte) et .btn-menu (« ⋯ »). */

.btn-discret {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 34px;
  padding: 0.25rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--encre-douce);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
}
.btn-discret:hover { background: var(--survol); color: var(--encre); }

.btn-menu {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--encre-douce);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.btn-menu:hover, .btn-menu.menu-ouvert { background: var(--survol); color: var(--encre); }

/* ---------- Champs : ceux de base.css (sur-papier) ---------- */

.preparer .champ { color: var(--encre-douce); font-size: 0.92rem; }
.preparer select { min-height: 40px; }

.case-petite { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; color: var(--encre-douce); cursor: pointer; }
.case-petite input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--agir); }

.vide-texte { margin: 0.5rem 0; color: var(--encre-douce); }
.note-douce { margin: 0; color: var(--encre-douce); font-size: 0.92rem; }

/* ---------- Entête d'une ligne ---------- */

.entete {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 58px;
  padding: 0 1.2rem;
  border-bottom: 1px solid var(--filet);
}
.entete-accueil { color: var(--encre-douce); font-weight: 500; text-decoration: none; padding: 0.3rem 0.5rem; margin-left: -0.5rem; border-radius: 8px; }
.entete-accueil:hover { background: var(--survol); color: var(--encre); }
.entete-titre { font-size: 1.3rem; }
.entete-jeu { display: flex; align-items: center; min-width: 0; }
.entete-jeu::before { content: '/'; margin-right: 0.7rem; color: var(--filet-fort); font-size: 1.3rem; }
.entete-jeu-nom {
  max-width: 36vw;
  overflow: hidden;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: 1.3rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.entete-jeu-nom:hover { background: var(--survol); }
.entete-jeu-nom::after { content: ' ▾'; color: var(--encre-pale); font-size: 0.75em; }
.preparer .entete-jeu-champ { width: 22rem; font-size: 1.2rem; font-weight: 500; }
.entete-ressort { flex: 1 1 auto; }

.indicateur { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--encre-douce); font-size: 0.92rem; white-space: nowrap; }
.indicateur::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--absent); }
.indicateur[data-etat='ok']::before { content: '✓'; width: auto; height: auto; background: none; color: var(--encre-pale); font-weight: 700; }
.indicateur[data-etat='encours']::before { background: var(--agir); animation: pulsation 1s ease-in-out infinite; }
.indicateur[data-etat='modifie']::before { background: #d9a400; }
.indicateur[data-etat='invalide'] { color: #8a5a00; }
.indicateur[data-etat='invalide']::before { background: #d9a400; }
.indicateur[data-etat='probleme'] { color: var(--faux); font-weight: 600; }
.indicateur[data-etat='probleme']::before { background: var(--faux); }
@keyframes pulsation { 50% { opacity: 0.3; } }

.btn-entete {
  min-height: 36px;
  padding: 0.25rem 0.85rem;
  border: 1.5px solid var(--filet-fort);
  border-radius: 999px;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.btn-entete:hover { background: var(--survol); }
.btn-entete::after { content: ' ▾'; color: var(--encre-pale); }
.btn-rond { width: 36px; padding: 0; font-weight: 700; }
.btn-rond::after, #btn-aide::after { content: none; }
#btn-action-sauvegarde { color: var(--agir); font-weight: 600; }

.bandeau-erreur {
  flex: none;
  margin: 0;
  padding: 0.5rem 1.2rem;
  background: #fbe3df;
  color: #8f2418;
  font-size: 0.95rem;
  font-weight: 500;
}

/* ---------- Quatre colonnes : jeux | questions | feuille | aperçu ---------- */

.colonnes {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 240px minmax(290px, 330px) minmax(420px, 1fr) minmax(330px, 400px);
  min-height: 0;
}
.col { min-height: 0; overflow-y: auto; padding: 1.1rem 1rem 3rem; }

.col-titre { margin: 1.1rem 0.5rem 0.3rem; color: var(--encre-douce); font-size: 0.85rem; font-weight: 500; }

/* Jeux */
.col-jeux { border-right: 1px solid var(--filet); }
.entree-banque,
.jeu-choisir {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  min-height: 40px;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--encre);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.entree-banque:hover, .jeu-choisir:hover { background: var(--survol); }
.entree-banque-nom::before { content: '⌕ '; color: var(--encre-pale); font-size: 1.1em; }
.entree-banque-nom, .jeu-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jeu-nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.entree-banque-nombre, .jeu-nombre { color: var(--encre-pale); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.entree-banque[aria-current='true'], .jeu-choisir[aria-current='true'] { background: var(--fond-creux); font-weight: 600; }
.jeu-choisir[aria-current='true'] { box-shadow: inset 3px 0 0 var(--agir); }
.liste-jeux { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.liste-jeux > li, .liste-questions > li { min-width: 0; }
.col-jeux-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.8rem; }
.col-jeux-actions .btn { flex: 1 1 auto; padding-inline: 0.7rem; white-space: nowrap; }

/* Aucun jeu : l'accueil prend la place des colonnes questions, feuille et aperçu. */
body[data-vide='oui'] .col-questions { grid-column: 2 / -1; display: grid; place-items: center; padding: 2rem; }
body[data-vide='oui'] .col-editeur, body[data-vide='oui'] .col-apercu { display: none; }
.accueil-vide { display: grid; gap: 0.9rem; max-width: 32rem; margin-top: -10vh; }
.accueil-vide-titre { font-size: 1.9rem; }
.accueil-vide-texte { margin: 0; color: var(--encre-douce); font-size: 1.1rem; }
.accueil-vide-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.4rem 0; }

/* Questions */
.col-questions { padding-right: 0; }
.liste-entete { display: flex; align-items: center; gap: 0.4rem; margin: 0 1rem 0.5rem 0.4rem; min-height: 34px; }
.liste-titre { flex: 1 1 auto; color: var(--encre-douce); font-size: 0.95rem; font-weight: 500; }
.liste-compte { color: var(--encre-pale); font-weight: 400; }
.liste-questions { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 2px; }
#btn-nouvelle-question { margin-left: 0.4rem; }

.q-ligne {
  position: relative;
  display: flex;
  align-items: flex-start;
  border: 1px solid transparent;
  border-right: 0;
  border-radius: 12px 0 0 12px;
}
.q-ligne:hover { background: var(--survol); }
/* La question ouverte : un onglet de la feuille (même fond, collé à l'éditeur). */
.q-ligne.q-choisie {
  z-index: 1;
  margin-right: -1px;
  border-color: var(--filet);
  background: var(--feuille);
}
.q-principal {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.4rem 0.55rem 0.5rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.q-numero { flex: none; min-width: 1.4rem; color: var(--encre-pale); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.q-choisie .q-numero { color: var(--agir); }
.q-corps { display: grid; gap: 0.15rem; min-width: 0; }
.q-resume { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.97rem; }
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; color: var(--encre-pale); font-size: 0.8rem; }
.q-bonne { display: inline-flex; align-items: center; gap: 2px; color: var(--encre-douce); }
.q-bonne-sans { color: #b06d00; }
.q-pictos { letter-spacing: 0.1em; }
.q-accroche { color: var(--encre-douce); font-size: 0.8rem; }
.q-accroche-sans { color: #b06d00; }
.q-ailleurs { color: var(--encre-pale); font-size: 0.78rem; font-style: italic; }
.q-orpheline { color: #b06d00; }
.q-certitude .q-principal { padding-left: 1.6rem; }
.q-menu { flex: none; margin: 0.45rem 0.4rem 0 0; visibility: hidden; }
.q-ligne:hover .q-menu, .q-ligne:focus-within .q-menu, .q-menu.menu-ouvert { visibility: visible; }
.q-ligne[draggable='true'] { cursor: grab; }
.q-ligne.glissee { opacity: 0.4; }
.q-ligne.depot-avant { box-shadow: inset 0 3px 0 var(--agir); }
.q-ligne.depot-apres { box-shadow: inset 0 -3px 0 var(--agir); }

/* Toute la banque */
.preparer .recherche { margin: 0 1rem 0.5rem 0.4rem; width: calc(100% - 1.4rem); }
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 1rem 0.7rem 0.4rem; }
.preparer .filtres select { width: auto; flex: 1 1 8rem; padding: 0.3rem 0.5rem; font-size: 0.9rem; }
.q-banque { border-radius: 12px 0 0 12px; }

/* Feuille (éditeur) et aperçu : voir preparer-editeur.css */
.col-editeur { background: var(--feuille); border-left: 1px solid var(--filet); border-right: 1px solid var(--filet); padding: 1.2rem 1.6rem 4rem; }
.col-apercu { padding: 1.2rem 1.2rem 2rem; overflow: hidden; }

/* ---------- Message temporaire : placé par commun.js hors des commandes (en haut à droite) ---------- */

.preparer .toast { background: var(--encre); color: #ffffff; font-weight: 500; }

/* ---------- Écrans plus étroits : l'aperçu passe au-dessus de la feuille ---------- */

@media (max-width: 1180px) {
  .colonnes { grid-template-columns: 190px minmax(250px, 300px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .col-jeux { grid-row: 1 / 3; }
  .col-questions { grid-row: 1 / 3; }
  .col-apercu { grid-column: 3; grid-row: 1; padding: 0.8rem 1.4rem 0.4rem; background: var(--feuille); border-left: 1px solid var(--filet); }
  .col-apercu .apercu { max-width: 420px; }
  .col-editeur { grid-column: 3; grid-row: 2; border-right: 0; }
}