/* etude-seance.css — the four sessions, read in the browser, and the sample of two
   of them (extrait.html).
   Loads after /invite.css (shell, tokens, fields) and /etude.css (the offer page's
   bands, seances list, permission block), and adds only the reading view.

   Two rules the audience sets. Blanks and buttons are at least 44px tall and 16px
   of type, because this is filled in with a thumb on a phone. And the printed
   sheet is the point, not an afterthought: a church that cannot photocopy the PDF
   can still print this page from the phone or a borrowed laptop, so everything
   that is screen furniture disappears under @media print. */

.topbar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0 0}
.topbar a{border:0}
.topbar .ink{color:var(--ink)}
.topbar .grey{color:var(--muted)}

.apercu{margin:16px 0 0;padding:10px 13px;background:#fdf8e8;border:1px solid var(--gold);font-size:14px;color:var(--label)}

/* ── the door ── */
.jetonform{margin:26px 0 0;border-top:1px solid var(--hair);padding-top:22px;max-width:520px}
.jetonform label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--label);margin:0 0 7px}
.jetonform input{margin-bottom:11px}

/* ── the four tabs ── */
.seances-nav{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin:24px 0 0}
.seance-onglet{display:block;background:var(--paper);padding:13px 15px;border:0;color:var(--body)}
.seance-onglet:hover{background:var(--drawer);border:0}
.seance-onglet.ici{background:var(--drawer);box-shadow:inset 3px 0 0 var(--gold)}
.seance-onglet .n{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--gold)}
.seance-onglet .t{display:block;font-family:var(--display);font-size:18px;color:var(--ink);line-height:1.2;margin-top:3px}
.seance-onglet .p{display:block;font-family:var(--mono);font-size:11px;color:var(--label);margin-top:2px}

.patiente{margin:40px 0;color:var(--muted);font-style:italic}

/* ── the session ── */
.seance-tete{padding:34px 0 0}
.seance-tete h1{font-size:36px;margin:10px 0 0;line-height:1.06}
.epigraphe{margin:24px 0 0;border-left:2px solid var(--gold);padding:2px 0 2px 18px}
.epigraphe p{font-family:var(--display);font-size:20px;line-height:1.4;color:var(--ink);margin:0}
.epigraphe footer{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--label);margin-top:8px}
.emporter{margin:22px 0 0;font-family:var(--display);font-size:19px;color:var(--ink);line-height:1.35}

.etiquette{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--label);margin:0 0 5px}
.etiquette.rouge{color:var(--wine)}
.petit{font-size:13.5px;color:var(--muted);line-height:1.55}

.chapitre{margin:34px 0 0;border-top:1px solid var(--hair);padding-top:28px}
.chapitre h3{font-family:var(--display);font-weight:500;font-size:23px;color:var(--ink);margin:30px 0 12px;line-height:1.2}
.chapitre h3:first-child{margin-top:0}
.chapitre h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--label);margin:22px 0 8px}
.chapitre p{margin:0 0 14px;line-height:1.7;color:var(--body)}
.cit{margin:18px 0;border-left:2px solid var(--gold);padding-left:16px}
.cit p{font-style:italic;color:var(--ink);margin:0 0 6px}
.cit footer{font-family:var(--mono);font-size:11px;color:var(--label)}
.nums{margin:0 0 16px;padding-left:22px}
.nums li{margin:0 0 9px;line-height:1.62;color:var(--body)}
.nums li::marker{color:var(--gold);font-family:var(--mono);font-size:12px}
.grec{font-size:17px}
.grec .gk{font-family:var(--display);font-size:22px;color:var(--wine)}
.fig{margin:24px 0;padding:0}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--hair);background:#fff}
.fig figcaption{font-family:var(--mono);font-size:11px;color:var(--label);margin-top:8px}
.tablebox{overflow-x:auto;margin:0 0 16px}
.tablebox table{border-collapse:collapse;width:100%;min-width:320px}
.tablebox td{border-bottom:1px dotted var(--dotted);padding:8px 10px 8px 0;vertical-align:top;font-size:15px}

/* collapsibles */
.repli{border-top:1px solid var(--hair);padding:14px 0}
.repli summary{cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--label);list-style:none}
.repli summary::-webkit-details-marker{display:none}
.repli summary::before{content:'+ ';color:var(--gold)}
.repli[open] summary::before{content:'– '}
.repli-corps{padding:14px 0 0}
.heure{list-style:none;margin:0;padding:0}
.heure li{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:7px 0;border-top:1px dotted var(--dotted)}
.heure .t{font-family:var(--mono);font-size:12px;color:var(--gold)}

/* ── the worksheet ── */
.fiche-bloc .fiche-outils{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.mini{border:1px solid var(--edge);background:var(--paper);color:var(--ink);font-family:var(--mono);
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:11px 14px;min-height:44px;cursor:pointer}
.mini:hover{background:var(--drawer)}
.jauge{height:3px;background:var(--hair);margin:0 0 7px}
.jauge-barre{height:3px;width:0;background:var(--gold);transition:width .25s}
.jauge-texte{font-family:var(--mono);font-size:11px;color:var(--label);margin:0 0 18px}

.fiche-tete{border-bottom:1px solid var(--hair);padding-bottom:14px;margin-bottom:18px}
.fiche-titre{font-family:var(--display);font-size:21px;color:var(--ink);margin:0 0 8px}
.fiche-passage{margin:0;line-height:1.6;color:var(--body)}
.fiche-accroche{margin:8px 0 0;color:var(--soft)}
.groupe{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--label);margin:24px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--hair)}
.point{display:grid;grid-template-columns:26px 1fr;gap:8px;margin:0 0 14px;line-height:1.85}
.point .no{font-family:var(--mono);font-size:12px;color:var(--gold);padding-top:3px}
.point .corps{color:var(--body)}
.blanc{display:inline-block;width:auto;min-width:130px;max-width:100%;border:0;border-bottom:1px solid var(--edge);
  background:transparent;padding:4px 5px;min-height:34px;font-family:var(--serif);font-size:16px;color:var(--wine)}
.blanc:focus{border-bottom-color:var(--ink);background:var(--picked)}
.blanc.bon{border-bottom-color:#2f7d43;color:#2f7d43}
.blanc.faux{border-bottom-color:var(--error);color:var(--error)}
.blanc.montre{border-bottom-color:var(--gold);color:var(--label);font-style:italic}
.point-outils{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle}
/* Full-size targets on a phone. These sit inline in a sentence, so the
   temptation is to shrink them — but the thumb pressing them belongs to a
   pastor filling in a worksheet on a 375px screen, and 32px was too small to
   hit. They shrink only where there is likely to be a mouse. */
.point-outils .mini{padding:8px 12px;min-height:44px;font-size:11px}

.encadre{border:1px solid var(--rule);background:var(--drawer);padding:14px 16px;margin:20px 0}
.encadre p{margin:0 0 9px;line-height:1.6}
.encadre p:last-child{margin-bottom:0}
.encadre.segond{border-left:2px solid var(--gold)}
.mots .gk{font-family:var(--display);font-size:19px;color:var(--wine);white-space:nowrap}
.mots .tr{font-family:var(--mono);font-size:12px;color:var(--label);white-space:nowrap}
.emporter-bloc{border-top:2px solid var(--gold);background:var(--drawer);padding:18px 18px 10px;margin:24px 0}
.emporter-bloc .s{font-family:var(--display);font-size:20px;color:var(--ink);margin:0 0 10px;line-height:1.35}
.ecrire{width:100%;min-height:90px}
.suite{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--label);
  border-top:1px solid var(--hair);padding-top:14px;margin-top:22px}

/* ── the companion ── */
.causerie{display:flex;flex-direction:column;gap:10px;margin:18px 0;max-height:440px;overflow-y:auto}
.bulle{padding:11px 14px;font-size:15.5px;line-height:1.6;white-space:pre-wrap;max-width:92%}
.bulle.moi{align-self:flex-end;background:var(--picked);border:1px solid var(--hair);color:var(--ink)}
.bulle.lui{align-self:flex-start;background:var(--drawer);border-left:2px solid var(--gold);color:var(--body)}
.demande-form{display:flex;gap:8px;align-items:stretch}
.demande-form input{flex:1 1 auto}
.demande-form .mini{white-space:nowrap}

/* ── the sample: its opening, its puzzle and the way into the study ── */
.extrait-tete{padding:34px 0 0}
.extrait-tete .lede{margin:0;max-width:none}
.jeu,.fin{border-top:1px solid var(--hair);margin-top:34px;padding-top:22px}
.appariement{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:12px;align-items:start;
  padding:12px 0;border-bottom:1px dotted var(--dotted)}
.appariement .terme{margin:10px 0 0;font-family:var(--display);font-size:19px;color:var(--ink);line-height:1.25}
.appariement select.bon{border-color:#2f7d43;color:#2f7d43}
.appariement select.faux{border-color:var(--error);color:var(--error)}
.appariement select.montre{border-color:var(--gold);color:var(--label);font-style:italic}
.preuve{margin-top:8px;background:var(--drawer);border-left:2px solid var(--gold);padding:9px 12px}
.preuve p{margin:0;font-size:15px;line-height:1.55;color:var(--body);font-style:italic}
.preuve span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--label);margin-top:5px}
.jeu .fiche-outils{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 8px}
.fin .boutons{margin:18px 0 0}
@media (max-width:520px){ .appariement{grid-template-columns:1fr;gap:4px} .appariement .terme{margin:0} }

/* ── wide ── */
@media (min-width:900px){
  .seances-nav{grid-template-columns:repeat(4,1fr)}
  .seance-tete{padding:52px 0 0}
  .seance-tete h1{font-size:46px}
  .epigraphe p{font-size:23px}
  .chapitre h3{font-size:26px}
  .bulle{max-width:76%}
  .point-outils .mini{padding:6px 9px;min-height:32px;font-size:10px}
}

/* ── printing the sheet ──
   A church with no photocopier still has a printer somewhere, or a phone that
   can print. When the sheet is printed it should look like the sheet in the
   book: the text and the blanks, nothing else. */
@media print{
  .noprint,.topbar,.seances-nav,.apercu,.foot,.repli,.cuthbert,.jauge,.jauge-texte,
  .fiche-outils,.point-outils,.demande-form,.causerie{display:none!important}
  .ground,.shell{background:#fff;box-shadow:none}
  .rail{display:none!important}
  .main{padding:0;max-width:none}
  body.impression-fiche .seance-tete,
  body.impression-fiche .chapitre,
  body.impression-fiche .band:not(.fiche-bloc){display:none!important}
  .blanc{border-bottom:1px solid #000;color:#000;min-width:150px}
  .blanc.montre,.blanc.bon,.blanc.faux{color:#000;border-bottom-color:#000;font-style:normal}
  .groupe,.etiquette{color:#000}
  a{color:#000;border:0}
}