/* Le portail Préparation (§7.4) — la seule URL à retenir.
 *
 * On prépare une soirée au calme, sur un ordinateur, des jours avant. Ce n'est
 * donc PAS la régie : ici on a le droit à des tableaux, des formulaires et du
 * texte lisible de près. Le seul moment festif est l'affiche à imprimer.
 */

body {
  padding: 28px 24px 60px;
  max-width: 1040px; margin: 0 auto;
  background:
    radial-gradient(90% 40% at 50% 0%, rgb(245 194 66 / .10), transparent 65%),
    var(--nuit);
  background-attachment: fixed;
}

h1 { font-size: 1.9rem; font-weight: 800; font-stretch: 112%; margin: 0 0 2px; }
h2 { font-size: 1.15rem; font-weight: 800; margin: 26px 0 6px; }
a { color: var(--laiton); }

.carte { background: var(--velours); border: 1px solid rgb(255 255 255 / .07);
         border-radius: var(--rayon); padding: 18px; margin-top: 14px; }

.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .grille { grid-template-columns: minmax(0, 1fr); } }

label { display: block; font-size: .82rem; color: var(--creme-sourd); margin-bottom: 4px; }
input, select, textarea, button {
  font-family: inherit; font-size: 1rem; padding: 11px; border-radius: 10px;
  border: 1px solid rgb(255 255 255 / .14); width: 100%;
  background: #1b1130; color: var(--creme);
}
textarea { min-height: 90px; resize: vertical; }
button { background: var(--velours-haut); border: none; font-weight: 700;
         cursor: pointer; min-height: 44px; }
button.ok { background: linear-gradient(180deg, var(--laiton), #e2a92c);
            color: var(--sur-laiton); }
button.lien { background: var(--rose); color: #fff; }
button.mini { width: auto; padding: 7px 12px; font-size: .85rem; min-height: 0; }

.barre { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.barre button { width: auto; }
.info { color: var(--creme-sourd); font-size: .9rem; }

.code-soiree { font-size: 2.4rem; font-weight: 900; letter-spacing: .22em;
               color: var(--laiton); font-variant-numeric: tabular-nums; }

table { width: 100%; border-collapse: collapse; table-layout: fixed; }
td, th { padding: 9px 6px; border-bottom: 1px solid rgb(255 255 255 / .08);
         text-align: left; font-size: .95rem; overflow: hidden;
         text-overflow: ellipsis; }
th { color: var(--creme-sourd); font-weight: 600; font-size: .82rem; }
.badge { background: var(--velours-haut); border-radius: 999px; padding: 2px 10px;
         font-size: .74rem; white-space: nowrap; }
.ligne-planning td:first-child { font-variant-numeric: tabular-nums;
                                 color: var(--laiton); font-weight: 700; width: 7ch; }

#qr { background: #fff; padding: 14px; border-radius: 12px; display: inline-block; }
#qr img { display: block; width: 220px; height: 220px; image-rendering: pixelated; }

/* — tableau de bord — ce qui tourne, ce qui vient, ce qui m'attend ————— */
/* La carte « En ce moment » est la seule mise en avant de la page : quand un
   jeu tourne, c'est LA chose à voir en levant les yeux. Quand rien ne tourne,
   elle redevient une carte comme les autres — une bordure qui brille en
   permanence ne veut plus rien dire. */
.carte-vive { border-color: var(--laiton);
              box-shadow: 0 0 0 1px rgb(245 194 66 / .25),
                          0 10px 40px rgb(0 0 0 / .35); }
.bord-titre { font-size: 1.5rem; font-weight: 900; font-stretch: 108%;
              line-height: 1.15; margin: 4px 0 6px; }
.bord-liste { list-style: none; padding: 0; margin: 6px 0 0;
              display: flex; flex-direction: column; gap: 10px; }
.bord-liste li { border-left: 3px solid var(--velours-haut); padding-left: 10px;
                 line-height: 1.45; }
.bord-liste b { font-weight: 800; }
.alerte { color: #ffc98a; font-size: .9rem; font-weight: 700; }
.badge.ok { background: linear-gradient(180deg, var(--laiton), #e2a92c);
            color: var(--sur-laiton); font-weight: 800; }

.onglets { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.onglets button { width: auto; }
.onglets button[aria-selected="true"] {
  background: linear-gradient(180deg, var(--laiton), #e2a92c); color: var(--sur-laiton);
}

/* Impression : une page blanche, un QR géant, une phrase. C'est une affiche à
   scotcher à l'entrée, pas une capture d'écran. */
@media print {
  body { background: #fff; color: #000; padding: 0; max-width: none; }
  .carte, .onglets, .barre, h2, .info, #liste-joueurs,
  #bloc-planning, #bloc-bord { display: none !important; }
  #affiche { display: block !important; text-align: center; padding-top: 5vh; }
  #affiche h1 { font-size: 40pt; font-stretch: 115%; }
  #affiche #qr { padding: 0; }
  #affiche #qr img { width: 13cm; height: 13cm; }
  #affiche .code-soiree { color: #000; font-size: 26pt; }
}
#affiche { display: none; }

/* — l'atelier de questions (chantier 7) — */
.fiche { white-space: pre-wrap; font-family: inherit; line-height: 1.5;
         background: var(--velours-haut); border-radius: var(--rayon);
         padding: 14px; margin: 0; max-height: 40vh; overflow-y: auto; }
.q-editeur { border-color: var(--laiton); }
.q-prop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.q-prop input[type=radio] { width: 24px; height: 24px; flex: none;
                            accent-color: var(--laiton); }
.q-prop input[type=text], .q-prop input:not([type]) { flex: 1 1 auto; }
.q-prop button { width: auto; flex: none; }
tr.q-active > td { background: rgb(245 194 66 / .08); }
.alerte-bloc { border-color: #ffc98a; }
.alerte-bloc ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }
textarea { font-family: inherit; font-size: 1rem; width: 100%; padding: 12px;
           border-radius: 12px; border: 1px solid rgb(255 255 255 / .14);
           background: #1b1130; color: var(--creme); resize: vertical; }

/* La fiche de la vedette s'imprime SEULE : c'est la feuille qu'on pose sur la
   table pendant le test, pas l'affiche du QR. */
#fiche-impression { display: none; }
@media print {
  body.impression-fiche #affiche { display: none !important; }
  body.impression-fiche #fiche-impression {
    display: block !important; color: #000; padding: 1cm;
  }
  body.impression-fiche #fiche-impression pre {
    white-space: pre-wrap; font-family: inherit; font-size: 12pt;
    line-height: 1.6;
  }
}

/* Création : les cartes « Où jouez-vous ? » et « Préparer ou jouer ? » */
.choix-cartes { margin: 14px 0; }
.carte.choix { display: flex; flex-direction: column; gap: 6px; text-align: left;
               cursor: pointer; font: inherit; color: inherit; }
.carte.choix:hover, .carte.choix:focus-visible { border-color: var(--laiton, #f5c242); }
.choix-ico { font-size: 2rem; line-height: 1; }
.badge.hors-situation { background: rgb(245 194 66 / .18); }

/* Le son de la soirée : une colonne sur téléphone, les interrupteurs restent lisibles */
.son-grille label { display: block; }
.son-grille select:disabled { opacity: .6; }
/* aucun mot seul en fin de ligne (« lieu. ») : on équilibre les lignes */
.son-grille label, .son-grille .info { text-wrap: balance; }

/* — l'offre et la création guidée (chantier 8) ————————————————————— */
button.gros { font-size: 1.08rem; padding: 14px 22px; }
.info-forte { color: var(--creme); font-weight: 700; }
.carte-demo { border-color: var(--laiton); }
.carte-demo h2 { margin-top: 10px; }
[hidden] { display: none !important; }

.formules .formule { display: flex; flex-direction: column; gap: 6px;
                     cursor: pointer; position: relative; }
.formule input { position: absolute; inset: 14px 14px auto auto; width: 22px;
                 height: 22px; accent-color: var(--laiton); }
.formule:has(input:checked) { border-color: var(--laiton);
                              box-shadow: 0 0 0 1px rgb(245 194 66 / .35); }
.formule b { font-size: 1.15rem; padding-right: 34px; }
.formule .prix { font-size: 2rem; font-weight: 900; color: var(--laiton);
                 font-variant-numeric: tabular-nums; }
.formule ul { margin: 4px 0 0; padding-left: 18px; color: var(--creme-sourd);
              line-height: 1.5; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem;
        color: var(--creme); margin: 8px 0; cursor: pointer; }
.case input { width: 22px; height: 22px; flex: none; margin-top: 1px;
              accent-color: var(--laiton); }

.assistant { max-width: 640px; margin: 0 auto; }
.assistant h1 { margin: 6px 0 8px; outline: none; text-wrap: balance; }
.assistant input { font-size: 1.15rem; margin-top: 10px; }
.progression { height: 6px; border-radius: 999px; background: var(--velours-haut);
               overflow: hidden; margin-bottom: 10px; }
.progression span { display: block; height: 100%; background: var(--laiton);
                    transition: width .25s ease-out; }
/* le choix retenu se voit SANS survol : fond teinté + coche, pas seulement
   la bordure dorée que prend aussi la carte survolée */
.choix[aria-pressed="true"] { border-color: var(--laiton); position: relative;
  background: color-mix(in srgb, var(--laiton) 16%, transparent); }
.choix[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 8px;
  right: 12px; color: var(--laiton); font-weight: 800; }

/* — le catalogue des jeux et les questionnaires de réglage (plan 12) ———— */
.feuille-reglage { position: fixed; inset: 0; z-index: 50; background: var(--nuit);
  overflow-y: auto; overscroll-behavior: contain;
  padding: max(20px, env(safe-area-inset-top)) 16px max(48px, env(safe-area-inset-bottom)); }
body.feuille-ouverte { overflow: hidden; }
.feuille-reglage .assistant { padding-top: 6px; }
.feuille-reglage textarea { width: 100%; font: inherit; font-size: 1.1rem; margin-top: 10px; }
.champ-nombre { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.champ-nombre input { margin-top: 0; text-align: center; flex: 1; min-width: 0; }
.champ-nombre button { width: 52px; min-height: 52px; font-size: 1.4rem; flex: none; }
.ligne-liste { display: flex; gap: 8px; align-items: center; }
.ligne-liste input { flex: 1; min-width: 0; }
.ligne-liste button { flex: none; }
.liste-lignes { margin-bottom: 10px; }
.feuille-reglage .carte.choix b { text-wrap: balance; }
.feuille-reglage .info { text-wrap: pretty; }

#cat-recherche { width: 100%; margin: 6px 0 4px; }
.cat-famille { font-size: .95rem; font-weight: 800; color: var(--laiton);
  text-transform: uppercase; letter-spacing: .06em; margin: 22px 0 8px; }
.cat-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .cat-grille { grid-template-columns: minmax(0, 1fr); } }
.cat-carte { display: flex; gap: 12px; align-items: flex-start; text-align: left;
  width: 100%; padding: 12px; background: var(--velours);
  border: 1px solid rgb(255 255 255 / .07); border-radius: 12px; color: inherit;
  font: inherit; cursor: pointer; }
.cat-carte:hover, .cat-carte:focus-visible { border-color: var(--laiton); }
.cat-carte .icone-jeu { flex: none; width: 44px; height: 44px; }
.cat-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.cat-texte b { text-wrap: balance; }
.cat-texte .info { font-size: .84rem; line-height: 1.35; text-wrap: pretty; }

/* Le planning sur téléphone : une fiche par ligne (le tableau à six colonnes
   écrasait les titres à un mot par ligne) */
@media (max-width: 640px) {
  #bloc-planning table, #bloc-planning tbody { display: block; }
  #bloc-planning tr:not(.ligne-planning) { display: none; }
  #bloc-planning .ligne-planning { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 8px 12px; align-items: center; padding: 12px 0;
    border-bottom: 1px solid rgb(255 255 255 / .08); }
  #bloc-planning .ligne-planning td { border: 0; padding: 0; width: auto; overflow: visible;
    white-space: normal; min-width: 0; }
  #bloc-planning .ligne-planning td:nth-child(2) { grid-column: 2; grid-row: 1; text-wrap: balance; }
  #bloc-planning .ligne-planning td:nth-child(1) { grid-column: 1; grid-row: 1; width: auto; }
  #bloc-planning .ligne-planning td:nth-child(3) { grid-column: 1 / -1; }
  #bloc-planning .ligne-planning td:nth-child(4) { grid-column: 1; }
  #bloc-planning .ligne-planning td:nth-child(5) { grid-column: 2; }
  #bloc-planning .ligne-planning td:nth-child(6) { grid-column: 1 / -1; display: flex;
    flex-wrap: wrap; gap: 8px; }
  #bloc-planning .ligne-planning td:nth-child(4) input { width: 7.5rem !important; }
}

/* — le carton d'invitation (plan 12, partie B) ——————————————————————————— */
.photo-choix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; margin: 8px 0; }
.photo-apercu { width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--laiton); }
.bouton-fichier { display: inline-block; cursor: pointer; }
.cache { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bouton-fichier:has(+ .cache:focus-visible) { outline: 3px solid var(--laiton); outline-offset: 2px; }
.bouton-lien { display: inline-block; text-decoration: none; text-align: center; }
.lien-invitation { width: 100%; margin: 8px 0 2px; font-size: .9rem; }
.inv-reponses summary { cursor: pointer; font-weight: 700; margin: 8px 0; }
.inv-reponses li { padding: 6px 0; border-bottom: 1px solid rgb(255 255 255 / .08); overflow-wrap: anywhere; }
.bouton-fichier, a.bouton-lien { background: var(--velours-haut); color: inherit; font-weight: 700;
  font-size: .85rem; padding: 9px 12px; border-radius: 8px; line-height: 1.2; min-height: 44px;
  display: inline-flex; align-items: center; }
.bouton-fichier { border: 1px solid var(--laiton); }