/* ═══════════════════════════════════════════════════════════════════════════
   BOOK — feuille de style isolée
   ═══════════════════════════════════════════════════════════════════════════
   Tout est préfixé .bk-* et ne dépend d'aucune autre feuille du site, pour que
   ce bloc puisse être repris tel quel. Mobile-first : le book est consulté au
   téléphone dans 90 % des cas (prospect qui scanne un QR sur une camionnette).

   Trois niveaux de réglage, dans cet ordre de priorité croissante :
     1. le THÈME    → data-theme  (formes, casse, densité, accent, traitement photo)
     2. le FOND     → data-bg     (couleurs de fond et de texte, palette fermée)
     3. la POLICE   → data-font   (titres uniquement)
   Le professionnel ne peut rien saisir librement : aucune combinaison des trois
   ne peut produire un résultat illisible. C'est volontaire.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Socle ────────────────────────────────────────────────────────────────── */
.bk, .bk *, .bk *::before, .bk *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Rendu sous EmptyLayout : couverture et réalisations vont d'un bord à l'autre. Aucune
   règle sur html/body ici, cette feuille est chargée par toute l'application. */
.bk { width: 100%; min-height: 100vh; }

.bk {
  --bk-body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Valeurs de repli — écrasées par data-theme / data-bg / data-font */
  --bk-title-font: 'Plus Jakarta Sans', sans-serif;
  --bk-bg: #FAF8F4;
  --bk-surface: #FFFFFF;
  --bk-text: #1A1A1A;
  --bk-text2: #5A5A58;
  --bk-border: rgba(0,0,0,.10);
  --bk-accent: #1D551E;
  --bk-accent-ink: #FFFFFF;

  --bk-radius: 14px;
  --bk-radius-sm: 10px;
  --bk-title-case: none;
  --bk-title-weight: 800;
  --bk-title-tracking: -.02em;
  --bk-gap: 20px;
  --bk-section-pad: 56px;
  --bk-photo-filter: none;
  --bk-maxw: 720px;

  /* Ce qui distingue vraiment un thème d'un autre, au-delà de la couleur :
     la photo est-elle encadrée ou à fond perdu, ses angles sont-ils vifs ou
     arrondis, la légende est-elle alignée à gauche ou centrée. */
  --bk-shot-inset: 0px;    /* marge latérale des photos : 0 = fond perdu */
  --bk-shot-radius: 0px;
  --bk-cap-align: left;
  --bk-cap-margin: 0;      /* auto quand la légende est centrée */
  --bk-cap-justify: flex-start; /* center quand la légende est centrée (vignettes) */

  background: var(--bk-bg);
  color: var(--bk-text);
  font-family: var(--bk-body-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  /* « clip » et non « hidden » : hidden fait de .bk une boîte de défilement (une valeur
     non visible sur un axe force l'autre à auto). Les sections y perdaient leur accroche
     — elles s'alignaient sur le défilement de .bk, qui ne défile jamais puisqu'il grandit
     avec son contenu — et l'impression y perdait ses coupures, une boîte de défilement
     étant monolithique en pagination. « clip » rogne pareil sans créer cette boîte. */
  overflow-x: clip;
}

/* Sur fond sombre, les surfaces s'éclaircissent au lieu de s'assombrir. */
.bk[data-dark="1"] { --bk-surface: rgba(255,255,255,.055); --bk-border: rgba(255,255,255,.14); }

.bk h1, .bk h2, .bk h3 {
  font-family: var(--bk-title-font);
  font-weight: var(--bk-title-weight);
  text-transform: var(--bk-title-case);
  letter-spacing: var(--bk-title-tracking);
  line-height: 1.12;
}

.bk-inner { max-width: var(--bk-maxw); margin: 0 auto; padding: 0 20px; }
/* Marge EN HAUT seulement : deux sections voisines ajoutaient chacune la leur,
   ce qui creusait des vides de plus de 100 px au téléphone. */
.bk-section { padding: var(--bk-section-pad) 0 0; }
.bk-contact { padding-bottom: var(--bk-section-pad); }

.bk-section-title { font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--bk-accent); margin-bottom: 18px; font-family: var(--bk-body-font); }

/* ═══════════════════════════════════════════════
   THÈMES — on ne change que la peau
   ═══════════════════════════════════════════════ */

/* Atelier — chaleureux, artisanal. Photos ENCADRÉES aux angles doux :
   on regarde des tirages posés sur un établi. */
.bk[data-theme="atelier"] {
  --bk-radius: 16px; --bk-radius-sm: 12px;
  --bk-title-weight: 800; --bk-title-tracking: -.025em;
  --bk-gap: 22px; --bk-section-pad: 44px;
  --bk-accent-light: #A24B26; --bk-accent-dark: #E0855C;
  --bk-photo-filter: saturate(1.04) contrast(1.02);
  --bk-shot-inset: 16px; --bk-shot-radius: 16px;
}
/* Le tag devient une pastille cousue sur la légende. */
.bk[data-theme="atelier"] .bk-work-tag { display: table;
  border: 1px solid var(--bk-accent); border-radius: 999px; padding: 3px 10px;
  margin-bottom: 4px; }
/* Béton — brut, éditorial. Photos à FOND PERDU, angles vifs, réalisations
   numérotées : la mise en page d'un catalogue d'architecte. */
.bk[data-theme="beton"] {
  --bk-radius: 0px; --bk-radius-sm: 0px;
  --bk-title-weight: 800; --bk-title-tracking: -.04em;
  --bk-gap: 14px; --bk-section-pad: 48px;
  --bk-accent-light: #1A1A1A; --bk-accent-dark: #FFFFFF;
  --bk-photo-filter: grayscale(.35) contrast(1.08);
  --bk-shot-inset: 0px; --bk-shot-radius: 0px;
}
.bk[data-theme="beton"] .bk-work-head { display: grid; grid-template-columns: auto 1fr;
  column-gap: 16px; align-items: start; border-top: 1px solid var(--bk-text);
  padding-top: 14px; }
.bk[data-theme="beton"] .bk-work-num { display: block; font-family: var(--bk-title-font);
  font-size: 26px; font-weight: 800; line-height: 1; color: var(--bk-text);
  opacity: .28; grid-row: 1 / span 2; }
.bk[data-theme="beton"] .bk-work-tag,
.bk[data-theme="beton"] .bk-work h3 { grid-column: 2; }
/* Nuit — élégant, silencieux. Photos à fond perdu, légendes CENTRÉES et
   très aérées : la page d'un beau livre. */
.bk[data-theme="nuit"] {
  --bk-radius: 6px; --bk-radius-sm: 4px;
  --bk-title-weight: 700; --bk-title-tracking: -.015em;
  --bk-gap: 26px; --bk-section-pad: 50px;
  --bk-accent-light: #8A6A1F; --bk-accent-dark: #E9C46A;
  --bk-photo-filter: contrast(1.1) saturate(.92);
  --bk-shot-inset: 0px; --bk-shot-radius: 0px;
  --bk-cap-align: center; --bk-cap-margin: auto; --bk-cap-justify: center;
}
.bk[data-theme="nuit"] .bk-work-cap { padding-top: 20px; }
.bk[data-theme="nuit"] .bk-work-tag { letter-spacing: .3em; }
/* Un filet court sous le titre, comme un trait de plume. */
.bk[data-theme="nuit"] .bk-work h3::after { content: ''; display: block;
  width: 34px; height: 1px; background: var(--bk-accent); margin: 14px auto 0; }
/* Chantier — franc, lisible de loin. Photos à fond perdu, étiquettes pleines,
   titres en capitales : la signalétique d'un panneau de chantier. */
.bk[data-theme="chantier"] {
  --bk-radius: 2px; --bk-radius-sm: 2px;
  --bk-title-case: uppercase; --bk-title-weight: 800; --bk-title-tracking: .01em;
  --bk-gap: 16px; --bk-section-pad: 42px;
  --bk-accent-light: #B45309; --bk-accent-dark: #F5A524;
  --bk-photo-filter: saturate(1.08) contrast(1.05);
  --bk-shot-inset: 0px; --bk-shot-radius: 0px;
}
.bk[data-theme="chantier"] .bk-work-tag { display: table;
  background: var(--bk-accent); color: #fff; padding: 4px 10px; letter-spacing: .12em;
  margin-bottom: 10px; }
.bk[data-dark="1"][data-theme="chantier"] .bk-work-tag { color: #1A1A1A; }
.bk[data-theme="chantier"] .bk-work h3 { border-bottom: 3px solid var(--bk-accent);
  padding-bottom: 9px; display: inline-block; }
/* Nature — végétal, doux. Photos ENCADRÉES et très arrondies, légendes
   centrées : tout est sans angle. */
.bk[data-theme="nature"] {
  --bk-radius: 24px; --bk-radius-sm: 18px;
  --bk-title-weight: 700; --bk-title-tracking: -.02em;
  --bk-gap: 24px; --bk-section-pad: 48px;
  --bk-accent-light: #2E7D32; --bk-accent-dark: #86C88A;
  --bk-photo-filter: saturate(1.06);
  --bk-shot-inset: 18px; --bk-shot-radius: 28px;
  --bk-cap-align: center; --bk-cap-margin: auto; --bk-cap-justify: center;
}
.bk[data-theme="nature"] .bk-work-tag { letter-spacing: .16em; }
.bk[data-theme="nature"] .bk-work-cap { padding-top: 18px; }

/* L'accent suit la clarté du fond : jamais de contraste insuffisant, quelle
   que soit la combinaison thème × fond choisie par le professionnel. */
.bk { --bk-accent: var(--bk-accent-light); }
.bk[data-dark="1"] { --bk-accent: var(--bk-accent-dark); }

/* ═══════════════════════════════════════════════
   PALETTE DE FONDS — 11 choix fermés
   ═══════════════════════════════════════════════
   Six neutres et cinq teintes. Toutes sont désaturées : une couleur franche
   en aplat plein écran fatigue au bout de deux réalisations et vole la vedette
   aux photos, qui sont le vrai sujet. Chaque fond fixe aussi ses couleurs de
   texte, ce qui garantit le contraste quelle que soit la combinaison choisie.
   ═══════════════════════════════════════════════ */
/* ── Neutres ── */
.bk[data-bg="craie"]   { --bk-bg:#FAF8F4; --bk-surface:#FFFFFF; --bk-text:#1A1A1A; --bk-text2:#5A5A58; --bk-border:rgba(0,0,0,.10); }
.bk[data-bg="sable"]   { --bk-bg:#EFE6D8; --bk-surface:#FBF6EE; --bk-text:#2A2218; --bk-text2:#6B5D4B; --bk-border:rgba(0,0,0,.12); }
.bk[data-bg="pierre"]  { --bk-bg:#E9E9E6; --bk-surface:#F7F7F5; --bk-text:#1F1F1F; --bk-text2:#5A5A58; --bk-border:rgba(0,0,0,.12); }
.bk[data-bg="ardoise"] { --bk-bg:#2B3134; --bk-surface:rgba(255,255,255,.06); --bk-text:#F2F2F0; --bk-text2:#B3B8BA; --bk-border:rgba(255,255,255,.14); }
.bk[data-bg="foret"]   { --bk-bg:#15301A; --bk-surface:rgba(255,255,255,.06); --bk-text:#F0F5F0; --bk-text2:#A9C0AC; --bk-border:rgba(255,255,255,.14); }
.bk[data-bg="encre"]   { --bk-bg:#121212; --bk-surface:rgba(255,255,255,.06); --bk-text:#F5F5F5; --bk-text2:#A8A8A8; --bk-border:rgba(255,255,255,.14); }

/* ── Teintes pâles ── */
.bk[data-bg="brume"]   { --bk-bg:#E4ECF3; --bk-surface:#F4F8FB; --bk-text:#15222E; --bk-text2:#4B5A69; --bk-border:rgba(0,0,0,.11); }
.bk[data-bg="argile"]  { --bk-bg:#F2E2DB; --bk-surface:#FBF2EE; --bk-text:#38251E; --bk-text2:#6B5046; --bk-border:rgba(0,0,0,.12); }
.bk[data-bg="tilleul"] { --bk-bg:#E7EEDF; --bk-surface:#F5F9F0; --bk-text:#21301A; --bk-text2:#4D5D44; --bk-border:rgba(0,0,0,.12); }
.bk[data-bg="lavande"] { --bk-bg:#E8E4F0; --bk-surface:#F6F4FA; --bk-text:#251F36; --bk-text2:#534D68; --bk-border:rgba(0,0,0,.12); }
.bk[data-bg="marine"]  { --bk-bg:#1A2737; --bk-surface:rgba(255,255,255,.07); --bk-text:#EAF0F6; --bk-text2:#9DAFC2; --bk-border:rgba(255,255,255,.15); }

/* ── Teintes vives ──
   Saturées, mais profondes. Une couleur vive et CLAIRE ne peut porter ni la
   variante claire ni la variante foncée de l'accent du thème : le contraste
   tombe des deux côtés. Sur un fond profond, l'accent clair ressort au
   contraire pleinement — c'est là que la couleur peut être franche sans que
   la page devienne illisible. */
.bk[data-bg="brique"]   { --bk-bg:#733420; --bk-surface:rgba(255,255,255,.08); --bk-text:#FBEDE7; --bk-text2:#E0BCAB; --bk-border:rgba(255,255,255,.17); }
.bk[data-bg="ocre"]     { --bk-bg:#7E510E; --bk-surface:rgba(255,255,255,.08); --bk-text:#FDF3E2; --bk-text2:#F6E3BE; --bk-border:rgba(255,255,255,.17); }
.bk[data-bg="roi"]      { --bk-bg:#1E326E; --bk-surface:rgba(255,255,255,.08); --bk-text:#EAEFFB; --bk-text2:#AFC0E6; --bk-border:rgba(255,255,255,.17); }
.bk[data-bg="prune"]    { --bk-bg:#452A4E; --bk-surface:rgba(255,255,255,.08); --bk-text:#F6EFF8; --bk-text2:#CDB6D4; --bk-border:rgba(255,255,255,.17); }
.bk[data-bg="bordeaux"] { --bk-bg:#63202E; --bk-surface:rgba(255,255,255,.08); --bk-text:#FBECEF; --bk-text2:#E2B8C1; --bk-border:rgba(255,255,255,.17); }
.bk[data-bg="canard"]   { --bk-bg:#11505A; --bk-surface:rgba(255,255,255,.08); --bk-text:#E9F6F8; --bk-text2:#A7CFD7; --bk-border:rgba(255,255,255,.17); }
.bk[data-bg="indigo"]   { --bk-bg:#262A5E; --bk-surface:rgba(255,255,255,.08); --bk-text:#EDEEFA; --bk-text2:#B4B8E2; --bk-border:rgba(255,255,255,.17); }
.bk[data-bg="olive"]    { --bk-bg:#45521E; --bk-surface:rgba(255,255,255,.08); --bk-text:#F2F5E5; --bk-text2:#C7D2A2; --bk-border:rgba(255,255,255,.17); }
.bk[data-bg="emeraude"] { --bk-bg:#10513A; --bk-surface:rgba(255,255,255,.08); --bk-text:#E9F7F0; --bk-text2:#A6D2BD; --bk-border:rgba(255,255,255,.17); }

/* ═══════════════════════════════════════════════
   POLICES DE TITRES — 5 choix fermés
   Le corps de texte reste Inter quoi qu'il arrive : c'est ce qui garantit la
   lisibilité des descriptions de chantier, souvent longues.
   ═══════════════════════════════════════════════ */
.bk[data-font="jakarta"]  { --bk-title-font:'Plus Jakarta Sans', sans-serif; }
.bk[data-font="playfair"] { --bk-title-font:'Playfair Display', Georgia, serif; --bk-title-weight:700; --bk-title-tracking:-.01em; }
.bk[data-font="oswald"]   { --bk-title-font:'Oswald', Impact, sans-serif; --bk-title-weight:600; --bk-title-tracking:.005em; }
.bk[data-font="space"]    { --bk-title-font:'Space Grotesk', sans-serif; --bk-title-weight:700; --bk-title-tracking:-.03em; }
.bk[data-font="dmserif"]  { --bk-title-font:'DM Serif Display', Georgia, serif; --bk-title-weight:400; --bk-title-tracking:0; }

/* ═══════════════════════════════════════════════
   COUVERTURE
   ═══════════════════════════════════════════════ */
.bk-cover { position: relative; min-height: 78svh; display: flex; align-items: flex-end;
  overflow: hidden; background: #222; }
.bk-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: var(--bk-photo-filter); }
.bk-cover-veil { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.28) 100%); }
.bk-cover-body { position: relative; width: 100%; max-width: var(--bk-maxw); margin: 0 auto;
  padding: 0 20px 40px; color: #fff; }

/* Retour — fixe en haut à gauche, sur tout le book : on doit pouvoir repartir
   de n'importe quel écran. Sous la barre d'édition et le tiroir. */
.bk-back { position: fixed; z-index: 50;
  top: calc(14px + env(safe-area-inset-top)); left: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Voile sombre plutôt que clair : la flèche doit rester lisible aussi bien
     sur une photo de salle de bain blanche que sur un chantier sombre. */
  background: rgba(0,0,0,.42); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22); color: #fff;
  text-decoration: none; transition: background .15s ease; }
.bk-back:hover { background: rgba(0,0,0,.6); }
.bk-back svg { width: 20px; height: 20px; fill: currentColor; }

.bk-cover-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.26); color: #fff;
  padding: 6px 11px; border-radius: 999px; margin-bottom: 16px; }
.bk-cover-chip svg { width: 13px; height: 13px; fill: currentColor; }

.bk-cover h1 { font-size: clamp(34px, 11vw, 58px); color: #fff; margin-bottom: 10px; }
.bk-cover-trade { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.94); }
.bk-cover-trade b { color: #fff; }
.bk-cover-tag { margin-top: 14px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.86);
  max-width: 30em; }

/* ═══════════════════════════════════════════════
   À PROPOS + REPÈRES
   ═══════════════════════════════════════════════ */
/* Paragraphe de présentation — le premier texte du book, celui qui donne
   envie de faire défiler. Plus gros que le reste, avec une mesure limitée :
   au-delà d'une soixantaine de signes par ligne, l'œil perd la ligne suivante.
   pre-wrap conserve les paragraphes tapés par le professionnel. */
.bk-presentation {
  font-size: clamp(17px, 4.4vw, 19px); line-height: 1.7; color: var(--bk-text);
  white-space: pre-wrap; max-width: 36em;
}
/* Les métiers, sous la présentation : un repère plus discret que le titre de la partie. */
.bk-about-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bk-text2); margin: 28px 0 10px; }
.bk-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.bk-fact { background: var(--bk-surface); border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-sm); padding: 14px 10px; text-align: center; }
.bk-fact-val { font-family: var(--bk-title-font); font-size: 21px; font-weight: var(--bk-title-weight);
  letter-spacing: var(--bk-title-tracking); color: var(--bk-accent); line-height: 1.1; }
.bk-fact-lbl { font-size: 11px; color: var(--bk-text2); margin-top: 4px; line-height: 1.3; }

.bk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-chip { background: var(--bk-surface); border: 1px solid var(--bk-border);
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 500; color: var(--bk-text); }
.bk[data-theme="beton"] .bk-chip, .bk[data-theme="chantier"] .bk-chip { border-radius: 2px; }

/* ═══════════════════════════════════════════════
   RÉALISATIONS — le cœur du book
   ═══════════════════════════════════════════════
   Pas de cartes : une carte, c'est une publication dans un fil. Ici chaque
   réalisation occupe un écran — le titre en tête, la photo, puis le texte —
   la grammaire d'un site vitrine, pas celle d'un réseau social.
   ═══════════════════════════════════════════════ */
.bk-works-head { padding-bottom: 18px; }

.bk-work { position: relative; display: flex; flex-direction: column; }
/* Dans la colonne flex, les marges automatiques de .bk-inner le réduiraient à la largeur
   de son contenu : un titre court ou les vignettes se retrouveraient centrés. */
.bk-work > .bk-inner { width: 100%; }

.bk-work-head { text-align: var(--bk-cap-align); }
/* Le numéro n'est affiché que par le thème qui en fait sa signature. */
.bk-work-num { display: none; }
.bk-work-tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bk-accent); }
.bk-work h3 { font-size: clamp(21px, 5.6vw, 27px); margin-top: 6px; color: var(--bk-text); }

/* La scène prend la hauteur que le titre et le texte laissent, 30 % de l'écran au
   moins : tout se lit sans faire défiler. La photo n'y est jamais recadrée — les
   recadrages fixes coupaient les photos verticales en bandeau. Posée en absolu et
   centrée, elle garde ses proportions : une photo horizontale va d'un bord à
   l'autre sur les thèmes à fond perdu, une verticale se tient au milieu. Les
   angles du thème s'appliquent à la photo elle-même, pas à une boîte plus large. */
.bk-stage { position: relative; flex: 1 1 auto; min-height: 30svh;
  margin: 16px var(--bk-shot-inset) 0; }
.bk-stage > img { position: absolute; inset: 0; margin: auto; display: block;
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  border-radius: var(--bk-shot-radius); filter: var(--bk-photo-filter); }

/* Plusieurs photos : la principale en grand, les autres en vignettes. Une vignette
   peut être recadrée, elle ne sert qu'à choisir. */
.bk-thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: var(--bk-cap-justify);
  margin-top: 12px; }
.bk-thumb { width: 52px; height: 52px; flex-shrink: 0; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: min(var(--bk-radius-sm), 10px); overflow: hidden; opacity: .55;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: opacity .15s ease, outline-color .15s ease; }
.bk-thumb:hover { opacity: .85; }
.bk-thumb.sel { opacity: 1; outline-color: var(--bk-accent); }
.bk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--bk-photo-filter); }

.bk-work-cap { padding-top: 14px; text-align: var(--bk-cap-align); }
.bk-work-desc { font-size: 15px; color: var(--bk-text2); line-height: 1.6;
  max-width: 42em; margin-inline: var(--bk-cap-margin); }

.bk-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 34px;
  font-size: 15px; font-weight: 600; color: var(--bk-accent); text-decoration: none;
  transition: gap .18s ease; }
.bk-more:hover { gap: 12px; }

/* ═══════════════════════════════════════════════
   PREUVE SOCIALE — le lotus, jamais une note sur 5
   ═══════════════════════════════════════════════
   La fiabilité ProTrust se lit sur les 5 pétales du lotus (voir lotusScore et
   FIABILITE_NIVEAUX dans utils.js). Une note sur 5 dirait autre chose, et
   surtout la même chose que n'importe quel annuaire.
   ═══════════════════════════════════════════════ */
.bk-proof-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.bk-proof-lotus { flex-shrink: 0; line-height: 0; }
.bk-proof-lotus svg { display: block; }
.bk-proof-level { font-family: var(--bk-title-font); font-weight: var(--bk-title-weight);
  letter-spacing: var(--bk-title-tracking); text-transform: var(--bk-title-case);
  font-size: 19px; color: var(--bk-text); line-height: 1.2; }
.bk-proof-sub { font-size: 13.5px; color: var(--bk-text2); margin-top: 5px; line-height: 1.5; }

.bk-proof-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.bk-proof-cell { background: var(--bk-surface); border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-sm); padding: 13px 14px; }
.bk-proof-cell b { display: block; font-family: var(--bk-title-font); font-size: 22px;
  font-weight: var(--bk-title-weight); letter-spacing: var(--bk-title-tracking);
  color: var(--bk-accent); line-height: 1.1; }
.bk-proof-cell span { font-size: 11.5px; color: var(--bk-text2); }

.bk-quotes { display: flex; flex-direction: column; gap: 12px; }
.bk-quote { background: var(--bk-surface); border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-sm); padding: 16px; }
.bk-quote-txt { font-size: 14.5px; line-height: 1.6; color: var(--bk-text); }
.bk-quote-who { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.bk-quote-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bk-quote-name { font-size: 12.5px; font-weight: 600; color: var(--bk-text); }
.bk-quote-since { font-size: 11.5px; color: var(--bk-text2); }

/* ═══════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════ */
.bk-contact { text-align: center; }
.bk-contact h2 { font-size: clamp(26px, 7vw, 36px); margin-bottom: 10px; }
.bk-contact p { color: var(--bk-text2); margin-bottom: 24px; font-size: 15px; }

.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 22px; border-radius: var(--bk-radius-sm); border: 1px solid transparent;
  font-family: var(--bk-body-font); font-size: 16px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: transform .12s ease, opacity .15s ease; }
.bk-btn:active { transform: scale(.985); }
.bk-btn svg { width: 19px; height: 19px; fill: currentColor; }
.bk-btn--primary { background: var(--bk-accent); color: var(--bk-accent-ink); }
.bk-btn--ghost { background: transparent; color: var(--bk-text); border-color: var(--bk-border); margin-top: 10px; }
.bk[data-dark="1"] .bk-btn--primary { --bk-accent-ink: #121212; }
.bk[data-theme="beton"][data-dark="0"] .bk-btn--primary { --bk-accent-ink: #fff; }


/* ═══════════════════════════════════════════════
   PIED DE PAGE — la seule marque ProTrust visible
   ═══════════════════════════════════════════════ */
.bk-footer { border-top: 1px solid var(--bk-border); padding: 30px 0 120px; text-align: center; }
.bk-verified { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 600; color: var(--bk-text2); text-decoration: none; }
.bk-verified svg { width: 15px; height: 15px; fill: var(--bk-accent); }
.bk-footer-legal { margin-top: 8px; font-size: 11.5px; color: var(--bk-text2); opacity: .75; }

/* ═══════════════════════════════════════════════════════════════════════════
   ÉDITION EN PLACE
   ═══════════════════════════════════════════════════════════════════════════
   Visible du seul professionnel connecté sur son propre book. Le résultat EST
   l'interface : il modifie et voit immédiatement ce que verra son client.
   ═══════════════════════════════════════════════════════════════════════════ */

.bk-editbar { position: fixed; right: 14px; left: 14px; z-index: 60;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: none; justify-content: flex-end; gap: 8px; pointer-events: none; }
.bk.is-owner .bk-editbar { display: flex; }

.bk-fab, .bk-editbtn { display: none; align-items: center; gap: 8px; pointer-events: auto;
  border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--bk-body-font); font-size: 14px; font-weight: 700;
  padding: 13px 18px; box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.bk-fab svg, .bk-editbtn svg { width: 17px; height: 17px; fill: currentColor; }

.bk-fab { background: #1D551E; color: #fff; }
.bk-editbtn { background: #fff; color: #1A1A1A; }
.bk-editbtn--done { background: #1D551E; color: #fff; }

/* Hors édition : un seul bouton d'entrée. En édition : l'apparence et la
   sortie, séparées — fermer le tiroir ne doit pas arrêter l'édition. */
.bk.is-owner:not(.is-editing) .bk-fab { display: inline-flex; }
.bk.is-owner.is-editing .bk-editbtn { display: inline-flex; }
.bk.is-owner.is-editing .bk-printbtn { display: none; }
.bk.is-owner:not(.is-editing) .bk-printbtn { display: inline-flex; }


/* Réalisation en mode édition : poignées de déplacement et retrait, aux angles de la scène */
.bk-work-tools { display: none; gap: 7px; position: absolute; top: 10px; left: 10px; z-index: 5; }
.bk.is-editing .bk-work-tools { display: flex; }
/* Les photos vont d'un bord à l'autre : sans repère, on ne voit plus où
   commence la réalisation qu'on est en train de déplacer. Un liseré posé
   par-dessus les photos, qui ne décale rien. */
.bk.is-editing .bk-work::after { content: ''; position: absolute; inset: 0; z-index: 3;
  pointer-events: none; box-shadow: inset 0 0 0 3px rgba(29,85,30,.75); }
.bk[data-dark="1"].is-editing .bk-work::after { box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }

.bk-tool { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(18,18,18,.72); backdrop-filter: blur(6px); color: #fff;
  display: flex; align-items: center; justify-content: center; }
.bk-tool svg { width: 17px; height: 17px; fill: currentColor; }
.bk-tool:disabled { opacity: .32; cursor: default; }
.bk-tool--del { background: rgba(185,28,28,.86); margin-left: auto; }
.bk-work-tools--right { left: auto; right: 10px; }

/* ── Légendes réécrites en place ──────────────────────────────────────────
   Le professionnel tape directement dans le titre et le paragraphe, à leur
   place définitive et dans la police du thème : ce qu'il voit en écrivant est
   exactement ce que verra son client. */
.bk-editable { outline: none; border-radius: 6px;
  padding: 4px 8px; margin: 0 -8px;
  box-shadow: inset 0 0 0 1px var(--bk-border);
  background: var(--bk-surface);
  background: color-mix(in srgb, var(--bk-surface) 70%, transparent);
  cursor: text; transition: box-shadow .15s ease; }
.bk-editable:hover { box-shadow: inset 0 0 0 1px var(--bk-accent); }
.bk-editable:focus { box-shadow: inset 0 0 0 2px var(--bk-accent); }
h3.bk-editable { margin: 7px -8px 9px; }
p.bk-presentation.bk-editable { margin-bottom: 4px; min-height: 4em; }
p.bk-editable { display: block; }
/* Un champ vidé affiche son invite plutôt qu'une boîte muette. */
.bk-editable:empty::before { content: attr(data-invite); color: var(--bk-text2); opacity: .7; }

/* Pied du champ de présentation : compteur à gauche, retour au texte
   d'origine à droite. Le compteur ne crie qu'à l'approche de la limite —
   afficher en rouge dès le premier caractère serait absurde. */
.bk-pres-pied { display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.bk-count { font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--bk-text2); opacity: .8; }
.bk-count.proche { color: var(--bk-accent); opacity: 1; font-weight: 600; }

.bk-reset-text { display: inline-block; margin-top: 10px; background: none; border: none;
  padding: 0; font-family: var(--bk-body-font); font-size: 12.5px; font-weight: 600;
  color: var(--bk-accent); text-decoration: underline; cursor: pointer; }

/* Réalisations retirées du book — visibles du seul professionnel, en mode
   édition, pour qu'il puisse les remettre. Le client ne les voit jamais. */
.bk-hidden-wrap { display: none; margin-top: 26px; }
.bk.is-editing .bk-hidden-wrap.has-items { display: block; }
.bk-hidden-title { font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bk-text2); margin-bottom: 12px; }
.bk-hidden-row { display: flex; align-items: center; gap: 12px; background: var(--bk-surface);
  border: 1px solid var(--bk-border); border-radius: var(--bk-radius-sm);
  padding: 9px 12px 9px 9px; margin-bottom: 8px; }
.bk-hidden-row img { width: 46px; height: 46px; object-fit: cover; border-radius: var(--bk-radius-sm);
  flex-shrink: 0; opacity: .55; }
.bk-hidden-row span { flex: 1; font-size: 13.5px; color: var(--bk-text2); }
.bk-restore { background: none; border: 1px solid var(--bk-border); color: var(--bk-text);
  border-radius: 999px; padding: 7px 13px; font-family: var(--bk-body-font);
  font-size: 12.5px; font-weight: 600; cursor: pointer; flex-shrink: 0; }

/* ── Tiroir de personnalisation (bottom-sheet, pattern du site) ───────────── */
.bk-sheet-back { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.bk-sheet-back.open { opacity: 1; pointer-events: auto; }

.bk-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff; color: #1A1A1A; font-family: var(--bk-body-font);
  border-radius: 20px 20px 0 0; max-height: 82svh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.bk-sheet.open { transform: translateY(0); }

.bk-sheet-head { padding: 8px 18px 12px; border-bottom: 1px solid #EFEFEC; flex-shrink: 0; }
.bk-sheet-grab { width: 38px; height: 4px; border-radius: 999px; background: #D5D5D2; margin: 0 auto 12px; }
.bk-sheet-head h2 { font-family: var(--bk-body-font); font-size: 17px; font-weight: 800;
  text-transform: none; letter-spacing: -.01em; color: #1A1A1A; }
.bk-sheet-head p { font-size: 12.5px; color: #5A5A58; margin-top: 2px; }

.bk-sheet-body { overflow-y: auto; padding: 18px; flex: 1; -webkit-overflow-scrolling: touch; }
.bk-sheet-foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid #EFEFEC; flex-shrink: 0; }
.bk-sheet-foot .bk-btn { background: #1D551E; color: #fff; }

.bk-opt-group { margin-bottom: 24px; }
.bk-opt-group:last-child { margin-bottom: 0; }
.bk-opt-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #767676; margin-bottom: 10px; }

/* Thèmes : rail horizontal, chaque vignette montre sa vraie peau */
.bk-theme-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.bk-theme-rail::-webkit-scrollbar { display: none; }
.bk-theme-card { flex: 0 0 104px; scroll-snap-align: start; border: 2px solid #E8E8E6;
  border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; padding: 0;
  font-family: var(--bk-body-font); text-align: left; }
.bk-theme-card.sel { border-color: #1D551E; }
.bk-theme-prev { height: 66px; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 5px; padding: 6px; }
/* Le rectangle du haut figure la photo : encadrée ou à fond perdu, angles
   vifs ou arrondis — exactement ce que fera le thème. */
.bk-theme-shot { flex: 1; background: currentColor; opacity: .5; }
.bk-theme-prev i { display: block; height: 5px; border-radius: 2px; background: currentColor; }
.bk-theme-name { padding: 7px 9px 9px; font-size: 12.5px; font-weight: 700; color: #1A1A1A; }

/* Fonds : pastilles de la palette fermée */
.bk-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-swatch { width: 52px; height: 52px; border-radius: 12px; border: 2px solid #E8E8E6;
  cursor: pointer; padding: 0; position: relative; }
.bk-swatch.sel { border-color: #1D551E; }
.bk-swatch.sel::after { content: '✓'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 17px; font-weight: 700;
  color: var(--sw-ink); }

/* Polices : chaque option est écrite dans sa propre police */
.bk-fonts { display: flex; flex-direction: column; gap: 8px; }
.bk-font { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border: 2px solid #E8E8E6; border-radius: 12px; padding: 12px 14px; background: #fff;
  cursor: pointer; text-align: left; }
.bk-font.sel { border-color: #1D551E; }
.bk-font b { font-size: 19px; font-weight: 700; color: #1A1A1A; }
.bk-font span { font-family: var(--bk-body-font); font-size: 11.5px; color: #767676; flex-shrink: 0; }

/* ── Notification brève ───────────────────────────────────────────────────── */
.bk-toast-zone { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.bk-toast { background: #1A1A1A; color: #fff; font-family: var(--bk-body-font); font-size: 13.5px;
  font-weight: 500; line-height: 1.45; padding: 12px 16px; border-radius: 12px; max-width: 420px;
  box-shadow: 0 8px 26px rgba(0,0,0,.3); animation: bk-toast-in .22s ease both; }
.bk-toast--warn { background: #92400E; }
@keyframes bk-toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ═══════════════════════════════════════════════
   AU-DELÀ DU TÉLÉPHONE
   Le book reste une colonne : c'est une page de conversion, pas un magazine.
   On élargit la mesure et on passe les réalisations sur deux colonnes.
   ═══════════════════════════════════════════════ */
@media (min-width: 760px) {
  .bk { --bk-maxw: 900px; font-size: 16px; }
  .bk-presentation, textarea.bk-presentation.bk-editable { font-size: 20px; }
  .bk-section { padding-top: calc(var(--bk-section-pad) * 1.8); }
  .bk-contact { padding-bottom: calc(var(--bk-section-pad) * 1.8); }
  .bk-cover { min-height: 84svh; }
  .bk-cover-body { padding-bottom: 56px; }
  /* Un cadre de 16 px se perd sur un écran large : les thèmes encadrés
     doivent respirer proportionnellement, sinon ils redeviennent plein écran. */
  .bk[data-theme="atelier"] { --bk-shot-inset: 34px; }
  .bk[data-theme="nature"]  { --bk-shot-inset: 46px; }
  .bk-cover { min-height: min(84svh, 760px); }
  .bk-stage { margin-top: 22px; }
  .bk-thumbs { margin-top: 14px; gap: 10px; }
  .bk-thumb { width: 64px; height: 64px; }
  .bk-work-cap { padding-top: 18px; }
  .bk-proof-split { max-width: 460px; }
  .bk-facts { max-width: 520px; }
  .bk-contact .bk-btn { width: auto; min-width: 260px; }
  .bk-btn--ghost { margin-top: 0; margin-left: 10px; }
  .bk-editbar { bottom: 22px; left: auto; }
  .bk-footer { padding-bottom: 60px; }
  .bk-sheet { left: 50%; right: auto; transform: translate(-50%, 100%); width: 520px;
    border-radius: 20px 20px 0 0; }
  .bk-sheet.open { transform: translate(-50%, 0); }
}

/* ── Défilement : une partie par écran ────────────────────────────────────────
   Le book se parcourt comme un diaporama : chaque partie occupe la hauteur de
   l'écran et le défilement s'arrête sur chacune. L'accroche est posée sur le
   document lui-même, et uniquement quand un book est affiché — cette feuille est
   chargée par toute l'application.

   Pas de scroll-behavior: smooth ici. Combiné à une accroche impérative, le
   défilement animé du navigateur entre en concurrence avec le recalage : à la
   molette et au trackpad, cela produit des à-coups et des retours en arrière.
   L'accroche anime déjà le déplacement. */
html:has(.bk) {
  scroll-snap-type: y mandatory;
}

/* min-height et non height : une partie plus haute que l'écran (présentation
   longue, nombreux avis) garde son défilement libre. Une zone d'accroche plus
   grande que la fenêtre n'y retient pas le lecteur, c'est ce qui rend l'accroche
   impérative utilisable ici. */
.bk-cover,
.bk-section {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Le contenu se centre dans son écran plutôt que de coller en haut. */
.bk-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* La partie Réalisations n'est pas un écran à elle seule : chaque réalisation en
   est un. Son titre ouvre l'écran de la première. */
.bk-works {
  display: block;
  min-height: 0;
  padding-top: 0;
}

.bk-works-head {
  height: 76px;
  display: flex;
  align-items: center;
  padding-bottom: 0;
}

.bk-works-head .bk-section-title { margin-bottom: 0; }

/* Une réalisation tient dans son écran : la scène se réduit pour laisser la place au
   texte (voir .bk-stage). min-height et non height : un texte très long fait grandir
   l'écran plutôt que de passer sous la réalisation suivante. */
.bk-work {
  min-height: 100svh;
  padding: 28px 0 26px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* La première partage son écran avec le titre de la partie, dont elle est
   l'ouverture : c'est la section entière qui porte ici le point d'arrêt. */
.bk-work:first-of-type {
  min-height: calc(100svh - 76px);
  padding-top: 0;
  scroll-snap-align: none;
}

/* La flèche de retour, fixe, passerait sur le titre de chaque réalisation : on leur
   réserve sa hauteur. Tant que la colonne touche le bord gauche, le titre de la partie
   se range à côté d'elle, comme dans une barre d'application. */
.bk.has-back .bk-work:not(:first-of-type) { padding-top: calc(68px + env(safe-area-inset-top)); }
@media (max-width: 979px) {
  .bk.has-back .bk-works-head { padding-left: 68px; }
}

/* Avec une accroche impérative, tout ce qui suit le dernier point d'arrêt devient
   inatteignable : le navigateur y ramène aussitôt le lecteur. Le pied en devient
   donc un, calé sur le bas de la fenêtre. */
.bk-footer {
  scroll-snap-align: end;
  scroll-snap-stop: always;
}

/* En édition, l'accroche se battrait avec le curseur : écrire dans un champ fait
   défiler la page, qui serait aussitôt ramenée au début de la partie. */
html:has(.bk.is-editing) {
  scroll-snap-type: none;
}

@media (prefers-reduced-motion: reduce) {
  .bk *, .bk *::before, .bk *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Dans le pied, la marge du bouton ferait retomber la ligne de base. */
.bk-pres-pied .bk-reset-text { margin-top: 0; }

/* ── Champs d'édition en place ────────────────────────────────────────────────
   Des textarea et non du contenteditable : Blazor garde la main sur le DOM et le
   curseur ne saute pas pendant la frappe. Ils héritent de la typographie de leur
   emplacement pour que le professionnel écrive exactement ce que verra son client. */
textarea.bk-editable { display: block; width: calc(100% + 16px); border: 0; resize: none;
  overflow: hidden; field-sizing: content; min-height: 1.5em;
  font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
  letter-spacing: inherit; text-transform: inherit; text-align: inherit; color: inherit; }
textarea.bk-editable::placeholder { color: var(--bk-text2); opacity: .7; }
.bk-work h3 > textarea.bk-editable { margin: 0 -8px; }
textarea.bk-work-desc.bk-editable { font-size: 15px; line-height: 1.62; color: var(--bk-text2);
  max-width: none; margin: 0 -8px; }
textarea.bk-presentation.bk-editable { font-size: clamp(17px, 4.4vw, 19px); line-height: 1.7;
  color: var(--bk-text); max-width: none; min-height: 4em; }

/* Score non encore établi : on ne montre ni lotus vide ni note, seulement le volume de preuves. */
.bk-proof-pending { font-size: 13.5px; color: var(--bk-text2); line-height: 1.5; margin-bottom: 24px; }
/* Le titre en inline-block du thème Chantier réduirait le champ à rien : en édition il
   reprend toute la largeur. */
.bk.is-editing[data-theme="chantier"] .bk-work h3 { display: block; }
/* Pas de couleur par client en base : l'avatar reprend l'accent du thème. */
.bk-quote-av { background: var(--bk-accent); color: var(--bk-accent-ink); }
.bk[data-dark="1"] .bk-quote-av { color: #121212; }

/* ── Impression : A4 paysage, une partie par page ─────────────────────────────
   Le book est fait pour être montré sur un téléphone, mais aussi laissé sur une
   table : ces règles en sortent un document présentable, sans mise en page
   séparée à maintenir. Chaque partie commence en haut d'une page, chaque
   réalisation occupe la sienne. */
@media print {
  @page {
    size: A4 landscape;
    margin: 12mm;
  }

  /* L'accroche au défilement n'a plus d'objet, et fausse la pagination. */
  html:has(.bk) { scroll-snap-type: none; }

  /* Une boîte de défilement ne se coupe pas entre deux pages : elle est monolithique.
     Tant que html, body ou .bk en sont une, les coupures demandées plus bas sont ignorées
     et le book s'imprime d'un bloc rogné. Limité à la page du book : cette feuille est
     chargée par toute l'application. */
  html:has(.bk),
  html:has(.bk) body,
  .bk { overflow: visible; }

  html:has(.bk), html:has(.bk) body { background: #fff; }

  /* Sans cette autorisation, la plupart des navigateurs impriment le book en blanc :
     fonds de thème, voiles de couverture et vignettes disparaîtraient. */
  .bk, .bk * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Ce qui relève de la navigation ou de l'édition ne s'imprime pas. */
  .bk-back,
  .bk-editbar,
  .bk-sheet,
  .bk-sheet-back,
  .bk-work-tools,
  .bk-hidden-wrap,
  .bk-reset-text,
  .bk-pres-pied,
  .bk-toast-zone { display: none !important; }

  /* Une partie par page. Les propriétés page-break-* doublent les break-* : Safari ne
     gère toujours pas les secondes en pagination, et c'est le navigateur d'une bonne part
     des professionnels sur Mac et iPad. */
  .bk-cover,
  .bk-section {
    page-break-after: always;
    break-after: page;
  }

  .bk-contact {
    page-break-after: auto;
    break-after: auto;
  }

  /* Le pied reste avec la dernière partie plutôt que d'ouvrir une page à lui seul. */
  .bk-footer {
    page-break-before: avoid;
    break-before: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Les réalisations, elles, débordent forcément d'une page : c'est chacune d'elles,
     et non la partie entière, qui doit rester d'un seul tenant. */
  .bk-works {
    page-break-inside: auto;
    break-inside: auto;
  }

  .bk-work {
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-after: always;
    break-after: page;
    margin-bottom: 0;
  }

  .bk-work:last-of-type {
    page-break-after: auto;
    break-after: auto;
  }

  .bk-section-title,
  .bk-works-head {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Les hauteurs en svh se calent sur la page à l'impression : elles sont reprises en
     millimètres pour tenir dans les 186 mm utiles d'une A4 paysage. */
  .bk-cover { min-height: 0; height: 168mm; }

  .bk-section { padding-top: 0; }

  /* Les écrans de lecture n'ont pas lieu d'être sur le papier : chaque partie y est
     déjà seule sur sa page. Sans cela, les hauteurs en svh se calent sur la page et
     réservent une page entière à trois lignes de texte. */
  .bk-section,
  .bk-work,
  .bk-work:first-of-type { min-height: 0; }

  .bk-work,
  .bk.has-back .bk-work:not(:first-of-type) { padding-top: 0; }

  .bk-inner { max-width: 240mm; padding: 0; }

  /* Sur le papier, la scène ne remplit plus un écran : une hauteur fixe, qui laisse la
     place au titre, aux vignettes et à un long texte dans les 186 mm de la page. */
  .bk-stage { flex: none; height: 110mm; min-height: 0; }

  /* Les champs d'édition gardent la typographie de leur emplacement : imprimés, ils
     laisseraient un cadre vide en bas de texte. */
  textarea.bk-editable { overflow: visible; }
}