/* etude.css — the French invitations (/etude, /noel) and the request form
 * (/etude/demande), on the book's own look.
 *
 * Loads after /etude-base.css, which is the English invitation's stylesheet
 * copied unchanged: it already gives the struck words, the kept verse, the
 * Greek line, the rubric, the panels, the buttons and the fields. Only what
 * these pages add is here.
 *
 * French typography: the no-break spaces before : ; ! ? and inside « » live in
 * the markup. Do not tidy them out.
 */

/* ── the opening ── */
.booktitle{font-family:var(--head);font-weight:400;letter-spacing:-.015em;line-height:1.02;
  font-size:clamp(26px,4.4vw,34px);margin:0}
.booksub{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:19px;margin:6px 0 0}
.titleblock{margin-top:34px;padding-top:26px;border-top:1px solid var(--rule)}
.jump{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 26px}
.jump a{font-family:var(--label);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}

/* the line that lands alone, as it does on the page */
.beat{font-family:var(--head);font-weight:400;font-size:clamp(22px,3.6vw,28px);line-height:1.05;
  letter-spacing:-.01em;color:var(--ink);margin:22px 0}

/* ── the four weeks ── */
.seances{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--rule)}
.seances li{display:grid;grid-template-columns:86px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.seances .n{font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--muted)}
.seances .t{font-family:var(--head);font-size:19px;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.seances .p{font-size:15px;color:var(--muted)}
@media (max-width:520px){
  .seances li{grid-template-columns:1fr;gap:3px}
  .seances .n{letter-spacing:.2em}
}
.apres{font-size:15.5px;color:var(--muted);margin-top:16px}

/* the way to the sample */
.extrait{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--rubric);
  padding:16px 18px 18px;margin-top:24px}
.extrait p{margin:0}

/* the way into the study, behind its password */
.ask .btns + .petit{margin-top:14px}

.points{margin:0 0 14px;padding-left:20px}
.points li{margin:0 0 10px;line-height:1.6}
.points li::marker{color:var(--rubric)}

/* the two warnings — the book gives them as warnings, so they are set as one */
.warn{border-left:3px solid var(--rubric);padding-left:16px}
.warn h2.sec{margin-top:0}

/* what the file holds */
.contenu{margin:14px 0}
.contenu dt{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:18px 0 4px}
.contenu dt:first-child{margin-top:0}
.contenu dd{margin:0;line-height:1.6}
.poids{font-size:15px;color:var(--muted)}

/* the permission — the one block set apart, because it is the offer */
.permission{background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--rubric);
  padding:22px 22px 14px;margin-top:20px}
.permission h2.sec{margin-top:0}

/* ── the form ── */
.ou{font-size:15.5px;color:var(--soft);background:var(--panel);border-left:3px solid var(--rule);
  padding:10px 13px;margin:0 0 16px}
.pourquoi{font-size:15px;color:var(--soft);border-left:3px solid var(--rule);padding-left:13px;margin:0 0 20px}
.hintline{margin:5px 0 0;font-size:14px;color:var(--muted)}
.err{margin:16px 0 0;padding:11px 13px;background:var(--panel);border-left:3px solid var(--bad);
  color:var(--bad);font-size:15.5px}
.fine{margin:12px 0 0;font-size:14.5px;color:var(--muted);line-height:1.5}

/* The two consents, spelled out rather than "I accept the terms", because Meta
   requires the opt-in to be documented and what is documented has to be the
   sentence the reader actually read. These words and api/etude/index.js
   CONSENT must stay the same words. */
.accords{margin:18px 0 0;display:flex;flex-direction:column;gap:14px}
.accord{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;
  font-size:15px;line-height:1.5;cursor:pointer}
.accord input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--rubric);cursor:pointer}

/* ── the opened door ── */
.done{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--good);padding:22px 22px 16px}
.done .big{font-family:var(--head);font-weight:400;font-size:clamp(24px,4vw,30px);line-height:1.02;margin:0 0 10px}
.done .boutons{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 14px}
.petit{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ── who is writing ── */
.foot{justify-content:center}
.sig{font-family:var(--head);font-size:19px;letter-spacing:-.01em;margin-top:20px;line-height:1.25}
.sig .soft{display:block;font-family:var(--label);font-weight:600;font-size:13.5px;
  letter-spacing:.02em;color:var(--muted);margin-top:5px}