/* =========================================================
   Algérie Pratique — site public
   Design repris du langage des couvertures de la collection :
   blanc franc, gros titres Poppins bold, un seul accent vermillon,
   filets fins, angles nets, trame de points.
   ========================================================= */

:root {
  --ink:    #14110e;   /* noir chaud des couvertures */
  --ink-2:  #3a342c;
  --ink-3:  #6d655a;
  --ink-4:  #a49b8e;

  --flame:      #d1402a;   /* vermillon des couvertures */
  --flame-dark: #ab3120;
  --flame-tint: #fdf0ec;

  /* ---- Le rose ----
     Il ne vient pas de la charte : il vient d'une envie, et c'est une
     raison suffisante quand c'est la maison qui la formule. On l'a
     choisi voisin du vermillon plutot qu'oppose — meme chaleur, meme
     franchise — pour qu'il cohabite avec le rouge des couvertures au
     lieu de lui disputer la page. */
  --rose:       #e4577f;
  --rose-dark:  #c23a63;
  --rose-tint:  #fdeef3;
  --rose-pale:  #fbe3ec;

  --bg:     #ffffff;
  --bg-2:   #f7f5f2;
  --bg-3:   #efece7;

  --line:   #e6e1d9;
  --line-2: #f1eee9;

  --ok:      #2f6b3f;
  --ok-tint: #eef5ef;

  --r-xs: 2px;
  --r-sm: 4px;
  --r:    6px;

  --serif: 'Lora', 'Iowan Old Style', Georgia, serif;
  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap: 1240px;
  --narrow: 700px;

  /* trame de points des couvertures */
  --dots: radial-gradient(circle, rgba(20, 17, 14, .10) 1px, transparent 1px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -.035em;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
h3 { font-size: 1.25rem; letter-spacing: -.025em; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap-narrow { width: 100%; max-width: var(--narrow); margin: 0 auto; padding: 0 28px; }
.section { padding: 80px 28px; }
.muted { color: var(--ink-3); font-size: .94rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: 12px 18px; z-index: 999;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }

/* ---------- Libellés type « COLLECTION L'ALGÉRIE PRATIQUE » ---------- */
.eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--flame);
  margin-bottom: 1.1em;
}
.eyebrow-accent { color: var(--ink-4); }

.tag {
  display: inline-block;
  font-size: .64rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--flame);
  text-decoration: none; margin-bottom: .9em;
}
.tag:hover { color: var(--ink); }

/* ---------- Boutons : nets, pas de pilule ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  font-family: var(--sans); font-size: .87rem; font-weight: 600;
  letter-spacing: -.01em;
  padding: 14px 26px; border-radius: var(--r-sm);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}
.btn-sm { padding: 10px 18px; font-size: .8rem; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--flame); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-danger { background: var(--flame); color: #fff; }
.btn-danger:hover { background: var(--flame-dark); color: #fff; }

.link-arrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); white-space: nowrap;
  border-bottom: 1.5px solid var(--flame); padding-bottom: 3px;
}
.link-arrow::after { content: ' →'; }
.link-arrow:hover { color: var(--flame); }

.flash {
  padding: 14px 18px; margin: 20px 0; font-size: .9rem; font-weight: 500;
  border-left: 3px solid; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.flash ul { margin: 0; padding-left: 18px; }
.flash-success { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.flash-error   { background: var(--flame-tint); border-color: var(--flame); color: var(--flame-dark); }

.empty {
  text-align: center; padding: 80px 28px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* ---------- En-tête ---------- */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 78px; }

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-right: auto; }
.brand-mark { display: block; flex-shrink: 0; }
.brand-text strong {
  display: block; font-size: 1.16rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.035em; line-height: 1.1;
}
.brand-text small {
  display: block; font-size: .6rem; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-4); margin-top: 3px;
}

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav > a {
  padding: 9px 13px; text-decoration: none;
  font-size: .84rem; font-weight: 500; color: var(--ink-2);
  position: relative; transition: color .15s;
}
.site-nav > a:hover { color: var(--flame); }
.site-nav > a.is-active { color: var(--ink); font-weight: 600; }
.site-nav > a.is-active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 0;
  height: 2px; background: var(--flame);
}
.site-nav > a.btn { margin-left: 14px; }
.site-nav > a.btn::after { display: none; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none;
  border: 0; cursor: pointer; padding: 10px; margin-left: auto;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--dots); background-size: 22px 22px;
  opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(105deg, transparent 45%, #000 100%);
  mask-image: linear-gradient(105deg, transparent 45%, #000 100%);
}
.hero-inner {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 60px;
  align-items: center; padding-top: 96px; padding-bottom: 96px;
  position: relative; z-index: 1;
}
.hero h1 { margin-bottom: .3em; }
.lead { font-size: 1.12rem; color: var(--ink-3); max-width: 48ch; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Les vraies couvertures, en évidence */
.hero-covers { display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.hero-cover {
  display: block; width: 58%; border-radius: var(--r-xs); overflow: hidden;
  box-shadow: 0 18px 40px rgba(20, 17, 14, .22), 0 3px 10px rgba(20, 17, 14, .14);
  transition: transform .25s ease;
}
.hero-cover img { width: 100%; }
.hero-cover:first-child { transform: rotate(-4deg) translateX(12%); z-index: 1; }
.hero-cover:last-child  { transform: rotate(4deg) translateX(-12%); }
.hero-cover:first-child:hover { transform: rotate(-4deg) translateX(12%) translateY(-8px); }
.hero-cover:last-child:hover  { transform: rotate(4deg) translateX(-12%) translateY(-8px); }
.hero-cover:only-child { transform: none; width: 66%; }
.hero-cover:only-child:hover { transform: translateY(-8px); }

/* ---------- En-tête de page ---------- */
.page-head { border-bottom: 1px solid var(--line); padding: 76px 0 40px; }
.page-head h1 { margin-bottom: .25em; }

.search-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 30px; }
.search-bar input {
  flex: 1 1 240px; max-width: 380px; padding: 13px 0;
  border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0;
  font: inherit; font-size: .95rem; background: transparent; color: var(--ink);
}
.search-bar input:focus { outline: none; border-bottom-color: var(--flame); }
.clear-search { font-size: .82rem; color: var(--ink-4); }

.chips { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.chip {
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-4); padding-bottom: 5px;
  border-bottom: 2px solid transparent; transition: .15s;
}
.chip:hover { color: var(--ink); }
.chip.is-active { color: var(--ink); border-bottom-color: var(--flame); }

/* ---------- Sections ---------- */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 44px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 2px solid var(--ink);
}
.section-head h2 { margin: 0; }

.grid { display: grid; gap: 48px 36px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Cartes d'article : pas de boîte, du blanc ---------- */
.card { display: flex; flex-direction: column; background: none; border: 0; }
.card-media {
  display: block; aspect-ratio: 3 / 2; overflow: hidden; position: relative;
  background: var(--bg-2); border-radius: var(--r-xs); margin-bottom: 20px;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.03); }
.card-media-fallback {
  position: absolute; inset: 0;
  background-color: var(--bg-2); background-image: var(--dots); background-size: 16px 16px;
}
.card-body { display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.22rem; line-height: 1.2; margin-bottom: .5em; }
.card-body h3 a { color: inherit; text-decoration: none; }
.card-body h3 a:hover { color: var(--flame); }
.card-excerpt { font-size: .92rem; color: var(--ink-3); flex: 1; margin-bottom: 1.2em; line-height: 1.6; }
.card-meta {
  font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); display: flex; gap: 9px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--line);
}

/* ---------- À la une ---------- */
.featured {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px;
  align-items: center; padding-bottom: 72px; border-bottom: 1px solid var(--line);
}
.featured-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--bg-2); border-radius: var(--r-xs);
}
.featured-media img { width: 100%; height: 100%; object-fit: cover; }
.featured-body { padding: 0; }
.featured-body h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); margin-bottom: .35em; }
.featured-body h2 a { color: inherit; text-decoration: none; }
.featured-body h2 a:hover { color: var(--flame); }
.featured-body p { color: var(--ink-3); font-size: 1.02rem; }
.featured-body .card-meta { margin-bottom: 26px; border-top: 0; padding-top: 0; }

/* ---------- Bandeaux ---------- */
.band { background: var(--bg-2); padding: 80px 0; }

/* ---------- Rubriques : liste indexée ---------- */
.cat-grid { gap: 0; grid-template-columns: 1fr 1fr; }
.cat-tile {
  display: flex; flex-direction: column; text-decoration: none;
  padding: 30px 34px 30px 0; border-top: 1px solid var(--line);
  position: relative; transition: padding-left .18s ease;
}
.cat-tile:hover { padding-left: 14px; }
.cat-tile h3 { font-size: 1.5rem; margin-bottom: .3em; transition: color .15s; }
.cat-tile:hover h3 { color: var(--flame); }
.cat-tile p { font-size: .9rem; color: var(--ink-3); margin-bottom: .8em; }
.cat-count {
  font-size: .66rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ---------- Mission ---------- */
.mission { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.mission h2 { margin-bottom: .4em; }
.mission p { color: var(--ink-3); }
.mission .btn { margin-top: 14px; }
.mission-points { list-style: none; margin: 0; padding: 0; display: grid; }
.mission-points li {
  display: flex; flex-direction: column; gap: 5px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.mission-points li:last-child { border-bottom: 1px solid var(--line); }
.mission-points strong {
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--flame);
}
.mission-points span { font-size: .95rem; color: var(--ink-2); }

/* ---------- Livres ---------- */
.book-card { display: flex; flex-direction: column; }
.book-cover {
  display: block; position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--r-xs); margin-bottom: 18px;
  box-shadow: 0 10px 26px rgba(20, 17, 14, .16), 0 2px 6px rgba(20, 17, 14, .10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.book-card:hover .book-cover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(20, 17, 14, .24); }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-cover-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 20px;
  background-color: var(--ink); background-image: var(--dots); background-size: 14px 14px;
  color: #fff; text-align: center;
}
.book-cover-fallback span {
  font-weight: 700; font-size: 1.05rem; line-height: 1.15; letter-spacing: -.03em;
  text-transform: uppercase;
}
.book-cover-fallback-lg { position: relative; aspect-ratio: 2 / 3; }
.book-cover-fallback-lg span { font-size: 1.7rem; }
.ribbon {
  position: absolute; top: 0; left: 0; background: var(--flame); color: #fff;
  font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 11px;
}
.book-card-body { display: flex; flex-direction: column; flex: 1; }
.book-card-body h3 { font-size: 1.05rem; margin-bottom: .25em; line-height: 1.2; }
.book-card-body h3 a { color: inherit; text-decoration: none; }
.book-card-body h3 a:hover { color: var(--flame); }
.book-author {
  font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: .7em;
}
.book-price { font-weight: 600; color: var(--ink); font-size: .95rem; margin-bottom: 1em; }

/* Boutons d'achat */
.buy-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.buy-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-sm);
  font-size: .82rem; font-weight: 600; text-decoration: none;
  border: 1.5px solid transparent; transition: .15s; white-space: nowrap;
}
.buy-links-sm .buy-btn { padding: 9px 13px; font-size: .74rem; flex: 1 1 auto; justify-content: center; }
.buy-amazon { background: var(--ink); color: #fff; }
.buy-amazon:hover { background: var(--flame); color: #fff; }
.buy-google { background: transparent; color: var(--ink); border-color: var(--ink); }
.buy-google:hover { background: var(--ink); color: #fff; }
.buy-other { background: transparent; color: var(--ink-3); border-color: var(--line); }
.buy-other:hover { border-color: var(--ink); color: var(--ink); }

/* Fiche livre */
.book-detail { display: grid; grid-template-columns: 340px 1fr; gap: 64px; margin-top: 40px; align-items: start; }
.book-detail-cover img {
  width: 100%; border-radius: var(--r-xs);
  box-shadow: 0 24px 60px rgba(20, 17, 14, .26), 0 4px 12px rgba(20, 17, 14, .14);
}
.book-detail-info h1 { margin-bottom: .2em; }
.book-subtitle { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink-3); margin-bottom: .8em; }
.book-author-lg {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 1.4em;
}
.book-price-lg { font-size: 1.7rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; margin: 0 0 1em; }
.book-desc { margin-top: 36px; }
.book-specs {
  display: flex; flex-wrap: wrap; gap: 44px; margin-top: 36px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.book-specs dt { font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-4); font-weight: 600; }
.book-specs dd { margin: 5px 0 0; font-weight: 600; color: var(--ink); }

/* ---------- Article ---------- */
.breadcrumb {
  font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 28px;
}
.breadcrumb a { color: var(--ink-4); text-decoration: none; }
.breadcrumb a:hover { color: var(--flame); }
.breadcrumb span { margin: 0 6px; }

.article-head { padding-top: 64px; padding-bottom: 10px; }
.article-head h1 { margin-bottom: .35em; }

/* Le titre de l'aperçu, dans l'atelier d'articles : il porte l'allure
   d'un `h1` sans en être un — une page ne peut pas avoir trois titres
   de page. Les valeurs sont celles de `h1`, prises telles quelles. */
.article-head .fa-titre {
  font-family: var(--sans);
  font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--ink);
  margin: 0 0 .35em;
}
.article-lead { font-family: var(--serif); font-size: 1.24rem; color: var(--ink-3); line-height: 1.55; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); padding-top: 20px; border-top: 1px solid var(--line); margin-top: 30px;
}
.byline { color: var(--ink); font-weight: 600; }

.article-cover { margin: 44px auto; max-width: 1000px; padding: 0 28px; }
.article-cover img { width: 100%; border-radius: var(--r-xs); }
.article-cover figcaption {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 12px;
}

.article-body { padding-top: 12px; padding-bottom: 24px; }

.article-share {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 24px; margin-top: 36px; border-top: 1px solid var(--line);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.article-share > span { font-weight: 600; color: var(--ink-4); }
.article-share a, .copy-link {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; background: none; border: 0;
  padding: 0 0 3px; border-bottom: 1.5px solid var(--line); cursor: pointer; font-family: inherit;
}
.article-share a:hover, .copy-link:hover { color: var(--flame); border-bottom-color: var(--flame); }

/* Corps rédactionnel : Lora, comme la composition des livres */
.prose { font-family: var(--serif); font-size: 1.11rem; line-height: 1.78; color: var(--ink-2); }
.prose > *:first-child { margin-top: 0; }
.prose h2 {
  font-family: var(--sans); font-size: 1.55rem; letter-spacing: -.03em;
  margin: 2em 0 .6em; padding-top: .8em; border-top: 1px solid var(--line);
}
.prose h3 { font-family: var(--sans); font-size: 1.2rem; letter-spacing: -.025em; margin: 1.7em 0 .5em; }
.prose h4 { font-family: var(--sans); font-size: 1.02rem; margin: 1.5em 0 .4em; }
.prose p { margin: 0 0 1.2em; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.prose li { margin-bottom: .6em; }
.prose li::marker { color: var(--flame); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--flame); }
.prose a:hover { color: var(--flame); }
.prose img { border-radius: var(--r-xs); margin: 2em 0; }
.prose figure { margin: 2em 0; }
.prose figcaption { font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-top: 10px; }
.prose blockquote {
  margin: 2em 0; padding: 0 0 0 28px; border-left: 3px solid var(--flame);
  font-size: 1.3rem; line-height: 1.5; color: var(--ink); font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.8em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 2em 0; font-family: var(--sans); font-size: .92rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 13px 14px 13px 0; text-align: left; }
.prose th { font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--ink); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.prose code { background: var(--bg-2); padding: 2px 6px; border-radius: var(--r-xs); font-size: .88em; font-family: ui-monospace, Menlo, monospace; }
.prose pre { background: var(--ink); color: #f0ece6; padding: 22px; border-radius: var(--r-sm); overflow-x: auto; }
.prose pre code { background: none; color: inherit; padding: 0; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-xs); margin: 2em 0; }

/* ---------- Promotion des livres sous l'article ----------
   Fond clair volontaire : les couvertures sont sombres et
   doivent ressortir, comme sur fond blanc.                  */
.book-promo { margin: 60px 0 10px; padding: 36px 0 0; border-top: 3px solid var(--ink); }
.book-promo-head { margin-bottom: 36px; }
.book-promo-head .eyebrow { margin-bottom: .7em; }
.book-promo-head h2 { font-size: 1.7rem; margin-bottom: .3em; }
.book-promo-head p { color: var(--ink-4); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.book-promo-head p em { font-style: normal; color: var(--ink-3); font-weight: 600; }

.promo-list { display: grid; gap: 40px; }
.promo-item {
  display: grid; grid-template-columns: 160px 1fr; gap: 34px; align-items: start;
}
.promo-item + .promo-item { padding-top: 40px; border-top: 1px solid var(--line); }
.promo-cover {
  display: block; position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--r-xs);
  box-shadow: 0 14px 34px rgba(20, 17, 14, .22), 0 2px 8px rgba(20, 17, 14, .12);
  transition: transform .22s ease, box-shadow .22s ease;
}
.promo-cover:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(20, 17, 14, .28); }
.promo-cover img { width: 100%; height: 100%; object-fit: cover; }
.promo-info h3 { font-size: 1.5rem; margin-bottom: .2em; }
.promo-info h3 a { color: inherit; text-decoration: none; }
.promo-info h3 a:hover { color: var(--flame); }
.promo-subtitle { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-3); margin-bottom: .9em; }
.promo-meta {
  display: flex; flex-wrap: wrap; gap: 18px; font-size: .66rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 1em;
}
.promo-desc { font-size: .94rem; color: var(--ink-3); line-height: 1.65; margin-bottom: 1.1em; }
.promo-price { font-size: 1.3rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; margin-bottom: 1em; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 72px; }
.page-btn {
  min-width: 44px; padding: 12px 16px; text-align: center;
  text-decoration: none; color: var(--ink-3); font-size: .84rem; font-weight: 500;
  border-bottom: 2px solid transparent; transition: .15s;
}
.page-btn:hover { color: var(--ink); }
.page-btn.is-active { color: var(--ink); font-weight: 700; border-bottom-color: var(--flame); }

/* ---------- À propos / contact ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; border-top: 2px solid var(--ink); }
.stat { padding: 30px 20px 30px 0; }
.stat strong { display: block; font-size: 3rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.05em; }
.stat span { font-size: .68rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4); margin-top: 8px; display: block; }

.value-card { padding: 30px 0 0; border-top: 2px solid var(--ink); }
.value-card h3 { font-size: 1.3rem; margin-bottom: .4em; }
.value-card p { font-size: .94rem; color: var(--ink-3); margin: 0; }

.cta { text-align: center; padding: 80px 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta p { color: var(--ink-3); max-width: 50ch; margin: 0 auto 2em; font-size: 1.05rem; }

.contact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 72px; }
.contact-info h2 { font-size: 1.4rem; }
.contact-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; }
.contact-list li { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-top: 1px solid var(--line); }
.contact-list li > span { font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-4); font-weight: 600; }
.contact-list li p, .contact-list li a { margin: 0; color: var(--ink); text-decoration: none; }
.contact-list li a:hover { color: var(--flame); }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 26px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.field label { font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4); }
.field input, .field textarea, .field select {
  padding: 13px 0; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0;
  font: inherit; font-size: 1rem; background: transparent; color: var(--ink); width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--flame); }
.hp { position: absolute; left: -9999px; }

.news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.news-form input {
  flex: 1 1 150px; padding: 11px 0; border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, .25);
  background: transparent; color: #fff; font: inherit; font-size: .9rem;
}
.news-form input::placeholder { color: rgba(255, 255, 255, .35); }
.news-form input:focus { outline: none; border-bottom-color: var(--flame); }
.news-form .btn-primary { background: var(--flame); }
.news-form .btn-primary:hover { background: #fff; color: var(--ink); }

/* ---------- Erreurs ---------- */
.error-page { text-align: center; padding: 120px 28px; }
.error-code { display: block; font-size: 7rem; font-weight: 700; color: var(--flame); line-height: 1; letter-spacing: -.06em; }
.error-page .hero-actions { justify-content: center; }

/* ---------- Pied de page ---------- */
.site-footer {
  background: var(--ink); color: rgba(255, 255, 255, .62);
  padding: 80px 0 32px; margin-top: 100px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 48px; }
.footer-brand strong {
  font-size: 1.3rem; font-weight: 700; color: #fff; display: block;
  letter-spacing: -.035em; line-height: 1.1;
}
.footer-pub {
  display: block; font-size: .6rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .4); margin: 6px 0 16px;
}
.footer-brand p { font-size: .88rem; max-width: 32ch; line-height: 1.65; }
.socials { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; }
.socials a { color: rgba(255, 255, 255, .72); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.socials a:hover { color: var(--flame); }

.footer-col h4 {
  color: rgba(255, 255, 255, .4); font-size: .64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; margin-bottom: 1.6em;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: .88rem; }
.footer-col a:hover { color: #fff; }
.footer-news p { font-size: .85rem; margin-bottom: 18px; }

.footer-bottom {
  margin-top: 64px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .74rem; letter-spacing: .04em;
}
.footer-bottom p { margin: 0; }
.footer-note { color: rgba(255, 255, 255, .38); }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .book-detail { grid-template-columns: 260px 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-inner { gap: 40px; }
}

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 14px 20px 22px; gap: 0;
  }
  .site-nav.is-open { display: flex; }
  .site-nav > a { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
  .site-nav > a.is-active::after { left: 0; right: auto; width: 22px; bottom: -1px; }
  .site-nav > a.btn { margin: 16px 0 0; justify-content: center; border-bottom: 1.5px solid var(--ink); }

  .hero-inner { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 56px; gap: 48px; }
  .hero-covers { max-width: 340px; margin: 0 auto; }
  .featured { grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid { gap: 40px 28px; }
  .cat-grid { grid-template-columns: 1fr; }
  .mission { grid-template-columns: 1fr; gap: 40px; }
  .book-detail { grid-template-columns: 1fr; }
  .book-detail-cover { max-width: 250px; }
  .section { padding: 56px 28px; }
  .band { padding: 56px 0; }
  .page-head { padding: 52px 0 32px; }
  .promo-item { grid-template-columns: 120px 1fr; gap: 24px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-bottom: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .promo-item { grid-template-columns: 1fr; gap: 22px; }
  .promo-cover { max-width: 150px; }
  .buy-links { flex-direction: column; }
  .buy-btn { justify-content: center; }
  .brand-text small { display: none; }
  .article-cover { padding: 0; }
  .article-cover img { border-radius: 0; }
  .book-specs { gap: 28px; }
  .error-code { font-size: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- La collection en page d'accueil ---------- */
.collection { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.collection-item { display: grid; grid-template-columns: 168px 1fr; gap: 30px; align-items: start; }
.collection-cover {
  display: block; position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--r-xs);
  box-shadow: 0 14px 34px rgba(20, 17, 14, .22), 0 2px 8px rgba(20, 17, 14, .12);
  transition: transform .22s ease, box-shadow .22s ease;
}
.collection-cover:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(20, 17, 14, .28); }
.collection-cover img { width: 100%; height: 100%; object-fit: cover; }
.collection-body h3 { font-size: 1.5rem; margin-bottom: .2em; }
.collection-body h3 a { color: inherit; text-decoration: none; }
.collection-body h3 a:hover { color: var(--flame); }
.collection-sub {
  font-family: var(--serif); font-style: italic; font-size: 1.04rem;
  color: var(--ink-3); margin-bottom: .9em;
}
.collection-desc { font-size: .93rem; color: var(--ink-3); line-height: 1.65; margin-bottom: 1em; }
.collection-facts {
  display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 1em;
  font-size: .64rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.collection-price { font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; margin-bottom: 1em; }

/* ---------- Cartes numérotées ---------- */
.vc-num {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  color: var(--flame); margin-bottom: 1.2em;
}
.value-card h3 { font-size: 1.12rem; }

@media (max-width: 1060px) {
  .collection { grid-template-columns: 1fr; gap: 44px; }
  .collection-item { grid-template-columns: 150px 1fr; }
}
@media (max-width: 600px) {
  .collection-item { grid-template-columns: 1fr; gap: 22px; }
  .collection-cover { max-width: 160px; }
}

/* =========================================================
   Appareil éditorial : bandeau maison, catalogue, fiches,
   auteurs, colophon.
   ========================================================= */

/* ---------- Bandeau de tête ---------- */
.masthead { background: var(--ink); color: rgba(255, 255, 255, .55); }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; min-height: 34px;
  font-size: .64rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.masthead-links { display: flex; gap: 22px; }
.masthead-links a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.masthead-links a:hover { color: #fff; }

.section-tight { padding-bottom: 0; }
.section-top-tight { padding-top: 34px; }
.block-title {
  font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-4); padding-bottom: 12px; margin: 48px 0 22px;
  border-bottom: 1px solid var(--line);
}
.count-badge {
  font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  color: var(--ink-4); border: 1px solid var(--line); padding: 5px 11px; border-radius: var(--r-sm);
}

/* ---------- Bandeau des collections ---------- */
.coll-strip { display: flex; flex-wrap: wrap; gap: 14px; }
.coll-chip {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  padding: 16px 22px; border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s;
}
.coll-chip:hover { border-color: var(--ink); }
.coll-chip-name { font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.coll-chip-n {
  font-size: .64rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ---------- Catalogue : notices bibliographiques ---------- */
.catalogue { display: grid; }
.cat-record {
  display: grid; grid-template-columns: 150px 1fr 240px; gap: 40px;
  padding: 44px 0; border-top: 1px solid var(--line); align-items: start;
}
.cat-record:last-child { border-bottom: 1px solid var(--line); }
.cat-record-cover {
  display: block; position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--r-xs);
  box-shadow: 0 12px 30px rgba(20, 17, 14, .20), 0 2px 6px rgba(20, 17, 14, .12);
  transition: transform .2s ease;
}
.cat-record-cover:hover { transform: translateY(-5px); }
.cat-record-cover img { width: 100%; height: 100%; object-fit: cover; }
.cat-record-body h2 { font-size: 1.65rem; margin-bottom: .18em; }
.cat-record-body h2 a { color: inherit; text-decoration: none; }
.cat-record-body h2 a:hover { color: var(--flame); }
.cat-record-sub {
  font-family: var(--serif); font-style: italic; font-size: 1.08rem;
  color: var(--ink-3); margin-bottom: .7em;
}
.cat-record-author {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 1.1em;
}
.cat-record-author a { color: var(--ink-4); text-decoration: none; border-bottom: 1px solid var(--line); }
.cat-record-author a:hover { color: var(--flame); border-bottom-color: var(--flame); }
.cat-record-desc { font-size: .94rem; color: var(--ink-3); line-height: 1.7; margin: 0; }
.cat-record-side { display: flex; flex-direction: column; gap: 14px; }
.cat-record-price { font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; margin: 0; }
.btn-block { width: 100%; }

/* ---------- Fiches bibliographiques ---------- */
.biblio { margin: 0; display: grid; }
.biblio > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--line-2);
}
.biblio dt {
  font-size: .66rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.biblio dd { margin: 0; color: var(--ink); font-size: .93rem; }
.biblio dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--flame); }
.biblio-compact > div { grid-template-columns: 1fr auto; gap: 12px; padding: 9px 0; }
.biblio-compact dd { font-size: .84rem; text-align: right; }

.biblio-block { margin-top: 8px; }

/* ---------- Bloc commande sur la fiche ---------- */
.order-box { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--ink); }
.order-price { font-size: 1.6rem; font-weight: 700; letter-spacing: -.04em; color: var(--ink); margin: 0 0 .6em; }
.order-note { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin: 14px 0 0; }
.order-note-soon { color: var(--flame); }

/* ---------- Auteur ---------- */
.eyebrow-link { text-decoration: none; }
.eyebrow-link:hover { color: var(--ink); }

.author-block { margin-top: 8px; }
.author-inline { display: grid; grid-template-columns: 110px 1fr; gap: 26px; align-items: start; }
.author-inline h3 { font-size: 1.15rem; margin-bottom: .1em; }
.author-inline h3 a { color: inherit; text-decoration: none; }
.author-inline h3 a:hover { color: var(--flame); }
.author-inline p { font-size: .93rem; color: var(--ink-3); }
.author-photo, .author-portrait { width: 100%; border-radius: var(--r-xs); object-fit: cover; aspect-ratio: 1; }
.author-role {
  font-size: .66rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: .8em;
}

.author-page { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }
.author-page-side { display: grid; gap: 22px; }
.author-portrait-empty {
  display: grid; place-items: center; aspect-ratio: 1; width: 100%;
  background-color: var(--ink); background-image: var(--dots); background-size: 14px 14px;
  color: #fff; border-radius: var(--r-xs);
}
.author-portrait-empty span { font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; }

.biblio-list { list-style: none; margin: 0; padding: 0; display: grid; }
.biblio-list li {
  display: grid; grid-template-columns: 90px 1fr; gap: 26px;
  padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.biblio-cover {
  display: block; position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--r-xs); box-shadow: 0 8px 20px rgba(20, 17, 14, .18);
}
.biblio-cover img { width: 100%; height: 100%; object-fit: cover; }
.biblio-list h3 { font-size: 1.2rem; margin-bottom: .15em; }
.biblio-list h3 a { color: inherit; text-decoration: none; }
.biblio-list h3 a:hover { color: var(--flame); }
.biblio-sub { font-family: var(--serif); font-style: italic; color: var(--ink-3); font-size: .98rem; margin-bottom: .5em; }
.biblio-meta {
  display: flex; flex-wrap: wrap; gap: 16px; margin: 0;
  font-size: .64rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
}

.author-index { list-style: none; margin: 0; padding: 0; display: grid; }
.author-index li {
  display: grid; grid-template-columns: 130px 1fr; gap: 36px;
  padding: 36px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.author-index li:first-child { border-top: 1px solid var(--line); }
.author-index-photo { display: block; }
.author-index-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-xs); }
.author-index h2 { font-size: 1.5rem; margin-bottom: .12em; }
.author-index h2 a { color: inherit; text-decoration: none; }
.author-index h2 a:hover { color: var(--flame); }
.author-index p { font-size: .94rem; color: var(--ink-3); }

.rights-note {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--ink-4); letter-spacing: .02em;
}
.rights-note a { color: var(--ink-3); }

/* ---------- Bloc professionnels ---------- */
.pro-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  padding: 44px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
}
.pro-block h2 { font-size: 1.6rem; }
.pro-block p { color: var(--ink-3); font-size: .95rem; margin: 0; }
.pro-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pro-list li {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 0; border-bottom: 1px solid var(--line-2);
}
.pro-list span {
  font-size: .66rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.pro-list a { color: var(--ink); font-size: .9rem; text-decoration: underline; text-decoration-color: var(--flame); }

/* ---------- Colophon ---------- */
.colophon {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .7rem; letter-spacing: .06em; color: rgba(255, 255, 255, .45);
}
.colophon p { margin: 0; }
.colophon strong { color: rgba(255, 255, 255, .7); font-weight: 600; }
.site-footer .footer-bottom { margin-top: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .cat-record { grid-template-columns: 130px 1fr; gap: 30px; }
  .cat-record-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; }
  .cat-record-side .biblio-compact { flex: 1 1 260px; }
  .cat-record-side .btn-block { width: auto; }
  .author-page { grid-template-columns: 200px 1fr; gap: 40px; }
  .pro-block { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 880px) {
  .masthead-inner { justify-content: center; }
  .masthead-house { display: none; }
  .biblio > div { grid-template-columns: 1fr; gap: 4px; }
  .author-page { grid-template-columns: 1fr; }
  .author-page-side { max-width: 220px; }
  .author-index li { grid-template-columns: 90px 1fr; gap: 24px; }
  .author-inline { grid-template-columns: 80px 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .cat-record { grid-template-columns: 1fr; gap: 22px; }
  .cat-record-cover { max-width: 150px; }
  .biblio-list li { grid-template-columns: 70px 1fr; gap: 18px; }
}

.section-intro { font-size: 1rem; color: var(--ink-3); max-width: 60ch; margin: -22px 0 34px; }

/* Accueil sans couvertures : bandeau de titre simple */
.hero-solo .hero-inner { grid-template-columns: 1fr; padding-top: 84px; padding-bottom: 84px; }
.hero-solo .hero-text { max-width: 30ch; }
.hero-solo .lead { font-size: 1.18rem; color: var(--ink-3); }
@media (max-width: 880px) { .hero-solo .hero-inner { padding-top: 52px; padding-bottom: 52px; } }

/* Acces discret a l administration */
.admin-link {
  margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .5); text-decoration: none;
}
.admin-link:hover { color: var(--flame); }
@media (max-width: 600px) { .admin-link { display: block; margin: 8px 0 0; padding: 0; border-left: 0; } }
.admin-link-solo { margin-left: 0; padding-left: 0; border-left: 0; }

/* Marque sur une seule ligne */
.brand-text strong { font-size: 1.24rem; }
.brand { align-items: center; }

/* =========================================================
   Les blocs des articles

   La rubrique Lifestyle a ses encadrés de magazine. Ici c'est la
   charte de la maison : pas d'aplats de couleur, un filet et une
   étiquette. Ce qui distingue un bloc, c'est sa fonction — ce qu'il
   faut savoir, ce à quoi il faut faire attention, ce qu'on retient.

   Chaque règle vise .prose et .article-body : la première couvre les
   articles de la maison, la seconde les rubriques qui ont leur propre
   habillage et n'utilisent donc pas .prose.
   ========================================================= */

.prose .bloc,
.article-body .bloc {
  margin: 2.2rem 0; padding: 1.1rem 1.3rem 1.15rem;
  border-left: 3px solid var(--line); background: var(--bg-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.prose .bloc > :first-child,
.article-body .bloc > :first-child { margin-top: 0; }
.prose .bloc > :last-child,
.article-body .bloc > :last-child { margin-bottom: 0; }

.prose .bloc-titre,
.article-body .bloc-titre {
  display: block; margin: 0 0 .5rem;
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
}
.prose .bloc p,
.article-body .bloc p { font-size: .96rem; line-height: 1.72; margin: 0 0 .7rem; }

/* Ce qu'il faut savoir : neutre, dans le ton du texte */
.prose .bloc-savoir,
.article-body .bloc-savoir { border-left-color: var(--ink-4); }

/* Ce à quoi il faut faire attention : le vermillon de la maison */
.prose .bloc-attention,
.article-body .bloc-attention {
  border-left-color: var(--flame); background: var(--flame-tint);
}
.prose .bloc-attention .bloc-titre,
.article-body .bloc-attention .bloc-titre { color: var(--flame-dark); }

/* Ce qui est acquis, validé, confirmé */
.prose .bloc-verifie,
.article-body .bloc-verifie { border-left-color: var(--ok); background: var(--ok-tint); }
.prose .bloc-verifie .bloc-titre,
.article-body .bloc-verifie .bloc-titre { color: var(--ok); }

/* L'essentiel, en tête d'article */
.prose .bloc-essentiel,
.article-body .bloc-essentiel {
  border-left: 0; border-top: 2px solid var(--ink);
  background: transparent; padding: 1rem 0 1.2rem;
}
.prose .bloc-essentiel .bloc-titre,
.article-body .bloc-essentiel .bloc-titre { color: var(--ink); }
.prose .bloc-essentiel ul,
.article-body .bloc-essentiel ul { margin: 0 0 0 1.1rem; }
.prose .bloc-essentiel li,
.article-body .bloc-essentiel li { margin: 0 0 .45rem; line-height: 1.65; }

/* Une démarche, pas à pas : les numéros portent l'information */
.prose .etapes,
.article-body .etapes { margin: 2.2rem 0; padding: 0; list-style: none; counter-reset: etape; }
.prose .etapes > li,
.article-body .etapes > li {
  position: relative; margin: 0 0 1.3rem; padding-left: 3rem; list-style: none;
  line-height: 1.75;
}
.prose .etapes > li::before,
.article-body .etapes > li::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; left: 0; top: -.1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
}
.prose .etapes strong,
.article-body .etapes strong { display: block; margin-bottom: .15rem; }

/* Un mot d'administration, expliqué */
.prose .definition,
.article-body .definition {
  margin: 2rem 0; padding: .1rem 0 .1rem 1.2rem;
  border-left: 3px solid var(--ink);
}
.prose .definition dt,
.article-body .definition dt {
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  color: var(--ink); margin: 0 0 .3rem;
}
.prose .definition dd,
.article-body .definition dd { margin: 0 0 .9rem; line-height: 1.72; color: var(--ink-2); }
.prose .definition dd:last-child,
.article-body .definition dd:last-child { margin-bottom: 0; }

/* Les pièces à réunir : une liste qu'on coche */
.prose .a-fournir,
.article-body .a-fournir { margin: 2.1rem 0; padding: 0; list-style: none; }
.prose .a-fournir > li,
.article-body .a-fournir > li {
  position: relative; margin: 0 0 .7rem; padding-left: 2rem;
  list-style: none; line-height: 1.7;
}
.prose .a-fournir > li::before,
.article-body .a-fournir > li::before {
  content: ''; position: absolute; left: 0; top: .35em;
  width: 1.1rem; height: 1.1rem; border: 2px solid var(--ink-4);
  border-radius: var(--r-xs);
}
.prose .a-fournir > li::after,
.article-body .a-fournir > li::after {
  content: '✓'; position: absolute; left: .22rem; top: .18em;
  font-size: .82rem; font-weight: 700; color: var(--flame);
}

/* Ce qui plaide pour, ce qui plaide contre */
.prose .pour-contre,
.article-body .pour-contre {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin: 2.2rem 0; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.prose .pc-colonne,
.article-body .pc-colonne { background: #fff; padding: 1.1rem 1.2rem 1.2rem; }
.prose .pc-titre,
.article-body .pc-titre {
  display: block; margin: 0 0 .7rem; font-family: var(--sans);
  font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
.prose .pc-pour .pc-titre,
.article-body .pc-pour .pc-titre { color: var(--ok); }
.prose .pc-contre .pc-titre,
.article-body .pc-contre .pc-titre { color: var(--flame); }
.prose .pc-colonne ul,
.article-body .pc-colonne ul { margin: 0; padding: 0; list-style: none; }
.prose .pc-colonne li,
.article-body .pc-colonne li {
  position: relative; padding-left: 1.4rem; margin: 0 0 .55rem;
  font-size: .95rem; line-height: 1.65; list-style: none;
}
.prose .pc-pour li::before,
.article-body .pc-pour li::before {
  content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700;
}
.prose .pc-contre li::before,
.article-body .pc-contre li::before {
  content: '✕'; position: absolute; left: 0; color: var(--flame); font-weight: 700;
}

/* Les questions qu'on nous pose */
.prose .faq,
.article-body .faq { margin: 2.2rem 0; border-top: 1px solid var(--line); }
.prose .faq-item,
.article-body .faq-item { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.prose .faq-q,
.article-body .faq-q {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 1rem;
  color: var(--ink); margin: 0 0 .45rem; line-height: 1.5;
}
.prose .faq-r,
.article-body .faq-r { margin: 0; font-size: .96rem; line-height: 1.75; color: var(--ink-2); }

/* Où s'adresser : l'organisme, ses coordonnées */
.prose .organisme,
.article-body .organisme {
  margin: 2.2rem 0; padding: 1.2rem 1.3rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff;
}
.prose .organisme-nom,
.article-body .organisme-nom {
  display: block; font-family: var(--sans); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); margin: 0 0 .2rem;
}
.prose .organisme-role,
.article-body .organisme-role {
  display: block; font-size: .86rem; color: var(--ink-3); margin: 0 0 .9rem;
}
.prose .organisme dl,
.article-body .organisme dl {
  display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0;
}
.prose .organisme dt,
.article-body .organisme dt {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  padding-top: .18rem;
}
.prose .organisme dd,
.article-body .organisme dd { margin: 0; font-size: .95rem; line-height: 1.6; }

@media (max-width: 640px) {
  .prose .etapes > li,
  .article-body .etapes > li { padding-left: 2.5rem; }
  .prose .etapes > li::before,
  .article-body .etapes > li::before { width: 1.7rem; height: 1.7rem; font-size: .75rem; }
  .prose .pour-contre,
  .article-body .pour-contre { grid-template-columns: 1fr; }
}

/* Sur l'accueil, les mini-guides tiennent en trois colonnes : deux
   couvertures étirées sur toute la largeur mangeaient un cinquième de
   la page pour deux vignettes. */
.band .guide-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
@media (max-width: 900px) { .band .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .band .guide-grid { grid-template-columns: 1fr; } }

/* ---------- La date de mise à jour ---------- */
/* Sur un guide de démarche, savoir si l'information a été revue compte
   autant que la démarche elle-même. */
.article-maj {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .5rem; border-radius: 999px;
  background: var(--flame-tint); color: var(--flame-dark);
  font-size: .78rem; font-weight: 600;
}

/* ---------- Le sommaire d'un article long ---------- */
.article-sommaire {
  margin: 2.4rem auto 0; padding: 1.1rem 1.4rem 1.3rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-2);
}
.article-sommaire-titre {
  margin: 0 0 .7rem; font-family: var(--sans);
  font-size: .7rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.article-sommaire ol {
  margin: 0; padding: 0; list-style: none;
  counter-reset: som;
  columns: 2; column-gap: 2rem;
}
.article-sommaire li {
  counter-increment: som; margin: 0 0 .5rem;
  break-inside: avoid; line-height: 1.5;
}
.article-sommaire li::before {
  content: counter(som) '.';
  margin-right: .45rem; color: var(--ink-4);
  font-family: var(--sans); font-size: .82rem; font-variant-numeric: tabular-nums;
}
.article-sommaire a {
  color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid transparent; font-size: .95rem;
}
.article-sommaire a:hover { color: var(--flame); border-bottom-color: currentColor; }

/* Le titre visé ne doit pas se coller au haut de l'écran */
.article-body h2 { scroll-margin-top: 90px; }

@media (max-width: 640px) {
  .article-sommaire ol { columns: 1; }
}

@media print {
  .article-sommaire { display: none; }
}

/* ================================================================
   Colorier en grand
   ================================================================

   Le dessin prend l'écran, les couleurs se rangent en bas. C'est le
   seul moyen de colorier sur un téléphone : à 282 points de large, un
   doigt couvre le quart du dessin. */

.col-agrandir {
  display: none;               /* inutile sur un grand écran */
  width: 100%;
  padding: 12px 18px;
  margin-bottom: 14px;
  border: 2px solid var(--rose);
  border-radius: 10px;
  background: var(--rose);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
}

@media screen and (max-width: 640px) {
  .col-agrandir { display: block; }

  /* Le dessin en petit n'est plus une surface à colorier : c'est une
     vignette sur laquelle on tape pour ouvrir le grand. On le dit —
     un dessin qui ne réagit pas aux doigts passe pour cassé. */
  .col-atelier:not(.est-pleine-page) .col-feuille { cursor: zoom-in; }
}

.col-atelier.est-pleine-page {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  background: var(--bg-2);
  overflow: hidden;
}

/* Le dessin prend toute la place qui reste, et se centre. */
.est-pleine-page .col-feuille {
  order: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  overflow: hidden;
}
.est-pleine-page .col-feuille img,
.est-pleine-page .col-feuille .col-toile,
.est-pleine-page .col-feuille .coloriage-svg {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Les outils passent en bas, sur une bande qui défile du doigt. */
.est-pleine-page .col-palette {
  order: 1;
  flex: 0 0 auto;
  position: static;
  /* Un tiers de l'écran aux outils, deux tiers au dessin. Les
     couleurs sont en tête de la bande : ce sont elles qu'on cherche,
     le reste se déroule. */
  max-height: 34vh;
  overflow-y: auto;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.est-pleine-page .col-titre { margin: 8px 0 5px; font-size: .7rem; }
.est-pleine-page .col-teintes {
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 5px;
}
.est-pleine-page .col-commandes { margin-top: 10px; }

/* Ce qui n'a rien à faire pendant qu'on colorie. */
.est-pleine-page .col-sorties,
.est-pleine-page .col-partage,
.est-pleine-page .col-note { display: none; }

/* La sortie, toujours visible : on entre facilement dans un mode, on
   doit en sortir aussi facilement. */
.est-pleine-page .col-agrandir {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 70;
  width: auto;
  margin: 0;
  padding: 8px 16px;
  box-shadow: 0 2px 10px rgba(20, 17, 14, .22);
}


/* Avertissement de verification en fin d article */
.prose .note-verif { font-family: var(--sans); font-size: .84rem; color: var(--ink-4); line-height: 1.6; }

/* =========================================================
   Mini-guides : grille de fiches et agrandissement
   ========================================================= */

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 44px 34px;
}

.guide-card { margin: 0; display: flex; flex-direction: column; }

.guide-zoom {
  display: block; position: relative; width: 100%; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--bg-2); overflow: hidden; cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.guide-zoom:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20, 17, 14, .18);
  border-color: var(--ink-4);
}
.guide-zoom img { width: 100%; display: block; }

.guide-loupe {
  position: absolute; right: 12px; bottom: 12px;
  background: var(--ink); color: #fff;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--r-sm);
  opacity: 0; transform: translateY(6px); transition: .2s ease;
}
.guide-zoom:hover .guide-loupe, .guide-zoom:focus-visible .guide-loupe {
  opacity: 1; transform: translateY(0);
}

.guide-card-body { padding: 20px 0 0; }
.guide-card-body h2, .guide-card-body h3 { font-size: 1.3rem; margin-bottom: .12em; }
.guide-card-body h2 a, .guide-card-body h3 a { color: inherit; text-decoration: none; }
.guide-card-body h2 a:hover, .guide-card-body h3 a:hover { color: var(--flame); }
.guide-sub {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--ink-3); margin-bottom: .6em;
}
.guide-desc { font-size: .92rem; color: var(--ink-3); margin-bottom: .9em; line-height: 1.6; }

/* ---------- Page d'un mini-guide ---------- */
.guide-detail {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px;
  align-items: start; margin-top: 28px;
}
.guide-zoom-lg { border: 1px solid var(--line); }
.guide-detail-info h1 { margin-bottom: .15em; }
.guide-subtitle {
  font-family: var(--serif); font-style: italic; font-size: 1.35rem;
  color: var(--ink-3); margin-bottom: 1.2em;
}
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
/* La mention entre parenthèses reste lisible sans peser sur le bouton */
.btn-note { font-weight: 400; opacity: .78; }

/* ---------- Superposition plein écran ---------- */
body.lb-ouvert { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(12, 10, 8, .96);
  display: flex; flex-direction: column;
}
.lightbox[hidden] { display: none; }

.lightbox-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 14px 20px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.lightbox-titre {
  color: #fff; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.lightbox-actions { display: flex; align-items: center; gap: 8px; }

.lb-btn {
  display: grid; place-items: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; border-radius: var(--r-sm); cursor: pointer;
  font-size: 1rem; font-family: inherit; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.lb-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .35); color: #fff; }
.lb-fermer:hover { background: var(--flame); border-color: var(--flame); }
.lb-zoom {
  color: rgba(255, 255, 255, .7); font-size: .72rem; font-variant-numeric: tabular-nums;
  min-width: 52px; text-align: center;
}

.lightbox-scene {
  flex: 1; overflow: hidden; display: grid; place-items: center;
  padding: 20px; cursor: default; touch-action: none;
}
.lightbox-scene.is-grabbable { cursor: grab; }
.lightbox-scene.is-grabbing { cursor: grabbing; }
.lightbox-scene img {
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  will-change: transform;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  user-select: none; -webkit-user-drag: none;
}

.lightbox-aide {
  margin: 0; padding: 10px 20px 16px; text-align: center;
  color: rgba(255, 255, 255, .4); font-size: .7rem; letter-spacing: .06em;
}

@media (max-width: 880px) {
  .guide-detail { grid-template-columns: 1fr; gap: 32px; }
  .lightbox-bar { padding: 10px 14px; }
  .lightbox-titre { display: none; }
  .lightbox-actions { width: 100%; justify-content: space-between; }
  .lightbox-scene { padding: 8px; }
  .lightbox-aide { font-size: .64rem; }
  .guide-loupe { opacity: 1; transform: none; }
}

/* Figures dans le corps des articles */
.prose .art-figure { margin: 2.4em 0; }
.prose .art-figure img { width: 100%; margin: 0; border-radius: var(--r-xs); }
.prose .art-figure figcaption {
  font-family: var(--sans); font-size: .78rem; line-height: 1.5;
  color: var(--ink-3); margin-top: 12px; text-transform: none; letter-spacing: 0;
  padding-left: 14px; border-left: 2px solid var(--flame);
}
.prose .fig-credit { display: block; color: var(--ink-4); font-size: .72rem; margin-top: 3px; }
/* La largeur et la place choisies dans l'editeur */
.prose .art-figure { max-width: 100%; }
.prose .art-figure.pos-centre { margin-left: auto; margin-right: auto; }
.prose .art-figure.pos-gauche { float: left;  margin: .4em 2.2em 1.6em 0; }
.prose .art-figure.pos-droite { float: right; margin: .4em 0 1.6em 2.2em; }
.prose::after { content: ''; display: block; clear: both; }

/* Sans reglage, ou a la demande, l'image deborde de la colonne de texte */
@media (min-width: 900px) {
  .article-body .art-figure:not([class*="pos-"]) {
    width: calc(100% + 160px); max-width: none; margin-left: -80px;
  }
}
@media (max-width: 600px) {
  .prose .art-figure { margin: 1.8em 0; }
  .prose .art-figure[class*="pos-"] {
    width: 100% !important; float: none; margin-left: 0; margin-right: 0;
  }
}

/* =========================================================
   Carte fermée d'un mini-guide : elle annonce, sans montrer
   ========================================================= */

.mg-carte { display: flex; flex-direction: column; }

.mg-plat {
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: 3 / 4; padding: 28px 26px;
  background-color: var(--ink);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 20px 20px;
  border-radius: var(--r-xs); text-decoration: none; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.mg-plat:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(20, 17, 14, .28); }

.mg-collection {
  font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--flame); margin-bottom: 1.6em;
}
.mg-titre {
  font-size: 1.9rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.05;
  color: #fff; text-transform: uppercase;
}
.mg-soustitre {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: rgba(255, 255, 255, .62); margin-top: .5em;
}
.mg-pied {
  margin-top: auto; display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; position: relative; z-index: 1;
}
.mg-volets {
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.mg-ouvrir {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; padding-bottom: 3px; border-bottom: 2px solid var(--flame);
}
.mg-plat:hover .mg-ouvrir { color: var(--flame); }
.mg-ouvrir::after { content: ' →'; }

/* Les traits de pli, qui rappellent le dépliant fermé */
.mg-plis { position: absolute; inset: 0; pointer-events: none; }
.mg-plis i {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255, 255, 255, .07);
}
.mg-plis i:nth-child(1) { left: 25%; }
.mg-plis i:nth-child(2) { left: 50%; }
.mg-plis i:nth-child(3) { left: 75%; }

.mg-legende { padding-top: 18px; }
.mg-legende h3 { font-size: 1.16rem; margin-bottom: .3em; }
.mg-legende h3 a { color: inherit; text-decoration: none; }
.mg-legende h3 a:hover { color: var(--flame); }
.mg-legende p { font-size: .9rem; color: var(--ink-3); margin: 0; line-height: 1.6; }

@media (max-width: 600px) {
  .deplie-barre { padding: 11px 14px; }
  .deplie-nom { display: none; }
  .deplie-nav { margin-left: auto; }
  .mg-titre { font-size: 1.6rem; }
  .mg-plat { padding: 22px 20px; }
}

/* En-tete d un mini-guide */
.guide-head { max-width: 62ch; margin-bottom: 40px; }
.guide-head h1 { margin-bottom: .15em; }
.guide-intro { margin-top: 1.2em; }

/* =========================================================
   Lecteur de mini-guide : les pages se tournent
   ========================================================= */

.livre {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-2);
}
.livre:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }

/* ---------- Barre de commande ---------- */
.livre-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 13px 18px; background: var(--ink); color: #fff;
}
.livre-position { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.livre-num { font-size: 1.05rem; font-weight: 700; color: var(--flame); font-variant-numeric: tabular-nums; }
.livre-sur { font-size: .74rem; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.livre-nom {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82); margin-left: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.livre-nav { display: flex; align-items: center; gap: 8px; }
.livre-fleche {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; border-radius: var(--r-sm); cursor: pointer;
  font-size: 1.3rem; line-height: 1; font-family: inherit; transition: .15s;
}
.livre-fleche:hover:not(:disabled) { background: var(--flame); border-color: var(--flame); }
.livre-fleche:disabled { opacity: .3; cursor: default; }
.livre-nav .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.livre-nav .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- La scène : le volume du livre ---------- */
.livre-scene {
  position: relative;
  perspective: 2400px;
  perspective-origin: left center;
  background: var(--bg-3);
  transition: height .5s cubic-bezier(.4, 0, .2, 1);
}
/* La reliure, à gauche */
.livre-scene::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 14px;
  background: linear-gradient(90deg, rgba(20, 17, 14, .22), rgba(20, 17, 14, 0));
  z-index: 200; pointer-events: none;
}

.livre-page {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .62s cubic-bezier(.36, .06, .2, 1);
  will-change: transform;
}
.livre-page.est-tournee { transform: rotateY(-176deg); }

.page-recto {
  position: relative; width: 100%; height: 100%;
  background: transparent; overflow: hidden;
  display: grid; place-items: center;
}
.page-image {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; position: relative; line-height: 0;
}
.page-image img { width: 100%; display: block; }
.page-image .guide-loupe { right: 16px; bottom: 16px; }

/* L'ombre de la reliure, qui se creuse quand la page se soulève */
.page-ombre {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 17, 14, .16) 0, rgba(20, 17, 14, 0) 12%);
  transition: opacity .5s ease;
}
.livre-page.est-tournee .page-ombre { opacity: .3; }

.page-numero {
  position: absolute; right: 14px; top: 12px;
  font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .85); padding: 3px 8px; border-radius: 100px;
}

/* ---------- Les bords sur lesquels on appuie ---------- */
.livre-cote {
  position: absolute; top: 0; bottom: 0; width: 16%; min-width: 56px;
  z-index: 300; border: 0; padding: 0; cursor: pointer;
  background: transparent; display: grid; place-items: center;
  transition: background .22s ease;
}
.livre-cote-gauche { left: 0; }
.livre-cote-droit { right: 0; }
.livre-cote:disabled { cursor: default; }

.cote-fleche {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(20, 17, 14, .82); color: #fff;
  font-size: 1.5rem; line-height: 1;
  opacity: .34; transform: scale(.9);
  transition: opacity .22s ease, transform .22s ease;
  box-shadow: 0 4px 16px rgba(20, 17, 14, .3);
}
.livre-cote:hover:not(:disabled),
.livre-cote:focus-visible:not(:disabled) {
  background: linear-gradient(90deg, rgba(20, 17, 14, .12), transparent);
}
.livre-cote-droit:hover:not(:disabled),
.livre-cote-droit:focus-visible:not(:disabled) {
  background: linear-gradient(270deg, rgba(20, 17, 14, .12), transparent);
}
.livre-cote:hover:not(:disabled) .cote-fleche,
.livre-cote:focus-visible:not(:disabled) .cote-fleche { opacity: 1; transform: scale(1); }
.livre-cote:disabled .cote-fleche { opacity: 0 !important; }

/* Sur écran tactile, un repère un peu plus discret suffit */
@media (hover: none) {
  .cote-fleche { width: 40px; height: 40px; font-size: 1.3rem; }
}

/* ---------- Mode « tout voir » ---------- */
.livre.est-deplie .livre-scene {
  perspective: none; height: auto !important; cursor: default;
  display: flex; flex-direction: column;
}
.livre.est-deplie .livre-scene::before,
.livre.est-deplie .livre-scene::after { display: none; }
.livre.est-deplie .livre-page {
  position: relative; inset: auto; transform: none !important;
  backface-visibility: visible; transition: none;
}
.livre.est-deplie .livre-page + .livre-page { border-top: 1px solid var(--line); }
.livre.est-deplie .page-ombre { display: none; }
.livre.est-deplie .livre-cote { display: none; }

.guide-aide {
  margin-top: 18px; text-align: center;
  font-size: .68rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-4);
}

@media (max-width: 600px) {
  .livre-barre { padding: 11px 14px; }
  .livre-nom { display: none; }
  .livre-nav { margin-left: auto; }
  .livre-scene::before { width: 8px; }
  .livre-cote { width: 22%; min-width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .livre-page { transition: none; }
  .livre-scene { transition: none; }
}

/* =========================================================
   Le papier se soulève par le coin bas droit.

   La page est un quadrillage de carreaux. Tous pivotent autour
   de la même reliure, à gauche, mais chacun part avec un retard
   calculé d'après sa distance au coin bas droit : le coin décolle
   en premier, la vague remonte en diagonale vers la reliure.
   ========================================================= */

.page-image { position: relative; }

/* L'image fixe la taille de la page et porte le texte alternatif.
   Le rendu visible est assuré par les carreaux. */
.page-image > img { opacity: 0; }

.page-carreaux {
  --colonnes: 10;
  --lignes: 5;
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--colonnes), 1fr);
  grid-template-rows: repeat(var(--lignes), 1fr);
  transform-style: preserve-3d;
  pointer-events: none;
}

.carreau {
  background-image: var(--feuille);
  background-repeat: no-repeat;
  background-size: calc(var(--colonnes) * 100%) calc(var(--lignes) * 100%);
  background-position:
    calc(var(--c) / (var(--colonnes) - 1) * 100%)
    calc(var(--r) / (var(--lignes) - 1) * 100%);

  /* L'axe de rotation reste la reliure, quelle que soit la position du carreau */
  transform-origin: calc(var(--c) * -100%) center;
  backface-visibility: hidden;
  transform: rotateY(0deg);

  transition: transform .8s cubic-bezier(.33, .02, .3, 1);
  /* Retour à plat : la reliure se repose la première */
  transition-delay: calc((var(--c) + var(--r)) * 12ms);
  will-change: transform;
}

/* Départ : distance au coin bas droit — ce coin bouge d'abord */
.livre-page.est-tournee .carreau {
  transform: rotateY(-176deg);
  transition-delay: calc(
    ((var(--colonnes) - 1 - var(--c)) + (var(--lignes) - 1 - var(--r))) * 12ms
  );
}

/* Ombrage progressif vers la reliure, qui donne le bombé */
.carreau::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(20, 17, 14, calc(0.05 - var(--c) * 0.0045));
}

.livre-page { transform: none !important; transition: none; }

/* Une page déjà tournée s'efface : seuls ses carreaux, partis de
   l'autre côté, subsistent — et leur face arrière est masquée. */
.livre-page.est-tournee { pointer-events: none; }
.livre-page.est-tournee .page-numero,
.livre-page.est-tournee .page-ombre,
.livre-page.est-tournee .guide-loupe { display: none; }

@media (prefers-reduced-motion: reduce) {
  .carreau { transition: none; transition-delay: 0s !important; }
}

/* ---------- Bouton du son ---------- */
.livre-son { position: relative; font-size: 1.05rem; }
.livre-son .son-coupe { display: none; }
.livre-son[aria-pressed="true"] .son-actif { display: none; }
.livre-son[aria-pressed="true"] .son-coupe { display: inline; opacity: .45; position: relative; }
.livre-son[aria-pressed="true"] .son-coupe::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 50%;
  height: 1.5px; background: currentColor; transform: rotate(-38deg);
}

/* =========================================================
   Mini-guide en suggestion : meme cadre qu'un article, mais
   la couverture reste fermee. On l'ouvre en cliquant.
   ========================================================= */

.mg-plat-large {
  display: flex; align-items: flex-end; padding: 22px 24px;
  background-color: var(--ink);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 20px 20px;
  text-decoration: none;
  transition: box-shadow .25s ease;
}
.card-guide:hover .mg-plat-large { box-shadow: 0 16px 36px rgba(20, 17, 14, .22); }

.mgl-corps { position: relative; z-index: 1; display: block; }

.mgl-etiquette {
  display: block; font-size: .58rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--flame); margin-bottom: .8em;
}
.mgl-titre {
  display: block; font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.08; color: #fff; text-transform: uppercase;
}
.mgl-soustitre {
  display: block; font-family: var(--serif); font-style: italic; font-size: .88rem;
  color: rgba(255, 255, 255, .6); margin-top: .45em;
}

.card-guide .card-meta { color: var(--ink-4); }
.tag-guide { color: var(--ink-3); }

@media (max-width: 600px) {
  .mgl-titre { font-size: 1.3rem; }
  .mg-plat-large { padding: 18px 20px; }
}

/* =========================================================
   Lecture en double page.

   Deux pages se font face, la reliure au milieu. Tourner, c'est
   faire basculer une seule feuille : celle de droite s'en va vers
   la gauche pendant que sa voisine arrive à sa place. Les deux
   mouvements sont réglés pour n'en former qu'un.
   ========================================================= */

.livre.est-double .livre-scene { perspective-origin: center center; }

.livre.est-double .livre-page { width: 50%; right: auto; }
.livre.est-double .livre-page[data-cote-page="gauche"] { left: 0; }
.livre.est-double .livre-page[data-cote-page="droite"] { left: 50%; }

/* La reliure passe au centre et se creuse des deux côtés */
.livre.est-double .livre-scene::before {
  left: 50%; width: 34px; transform: translateX(-50%);
  background: linear-gradient(90deg,
    rgba(20, 17, 14, 0) 0,
    rgba(20, 17, 14, .16) 42%,
    rgba(20, 17, 14, .26) 50%,
    rgba(20, 17, 14, .16) 58%,
    rgba(20, 17, 14, 0) 100%);
}

/* ---------- La page de gauche : tout est en miroir ---------- */

/* Son axe de rotation est son bord droit, c'est-à-dire la reliure */
.livre.est-double .livre-page[data-cote-page="gauche"] .carreau {
  transform-origin: calc((var(--colonnes) - var(--c)) * 100%) center;
  /* Elle arrive : mêmes retards que la page qui s’en va en face, pour
     que le coin décollé à droite soit exactement celui qui se pose à gauche */
  transition-delay: calc((var(--c) + (var(--lignes) - 1 - var(--r))) * 12ms);
}

/* En attente, elle est relevée de l'autre côté de la reliure */
.livre.est-double .livre-page[data-cote-page="gauche"].est-en-attente .carreau {
  transform: rotateY(176deg);
  /* Elle repart : la reliure se soulève la première, comme en face au retour */
  transition-delay: calc(((var(--colonnes) - 1 - var(--c)) + var(--r)) * 12ms);
}

/* Le bombé se creuse vers la reliure, donc vers la droite */
.livre.est-double .livre-page[data-cote-page="gauche"] .carreau::after {
  background: rgba(20, 17, 14, calc(0.05 - (var(--colonnes) - 1 - var(--c)) * 0.0045));
}

.livre.est-double .livre-page[data-cote-page="gauche"] .page-ombre {
  background: linear-gradient(270deg, rgba(20, 17, 14, .16) 0, rgba(20, 17, 14, 0) 12%);
}
.livre.est-double .livre-page[data-cote-page="gauche"] .page-numero { left: 14px; right: auto; }
.livre.est-double .livre-page[data-cote-page="gauche"] .page-image .guide-loupe { left: 16px; right: auto; }

/* Une page qui n'est pas encore arrivée ne se laisse ni voir ni cliquer */
.livre-page.est-en-attente { pointer-events: none; }
.livre-page.est-en-attente .page-numero,
.livre-page.est-en-attente .page-ombre,
.livre-page.est-en-attente .guide-loupe { display: none; }

/* ---------- La page blanche de fin ---------- */
.livre-page-vide { background: #fbfaf8; }
.livre-page-vide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20, 17, 14, .07) 0, rgba(20, 17, 14, 0) 10%);
}
.livre:not(.est-double) [data-vide],
.livre.est-deplie [data-vide] { display: none; }

/* En dépliant, chaque page reprend toute la largeur */
.livre.est-deplie .livre-page { width: 100%; left: 0; }

@media (prefers-reduced-motion: reduce) {
  .livre.est-double .livre-page[data-cote-page="gauche"] .carreau {
    transition: none; transition-delay: 0s !important;
  }
}

/* =========================================================
   Commander depuis l'Algérie : pas de paiement en ligne,
   on écrit à la maison d'édition.
   ========================================================= */

.commande-dz {
  background: var(--flame-tint);
  border: 1px solid #f3d9d1;
  border-left: 3px solid var(--flame);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.cdz-titre {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--flame-dark);
  margin: 0 0 .6em;
}
.cdz-prix {
  font-family: var(--sans); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 .3em;
  font-variant-numeric: tabular-nums;
}
.cdz-texte {
  font-size: .88rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 1.1em;
}
.cdz-liens { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cdz-tel {
  font-family: var(--sans); font-size: .88rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--flame); padding-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.cdz-tel:hover { color: var(--flame); }

/* Le reste du monde, en second */
.order-ailleurs-titre {
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
  margin: 0 0 .7em; padding-top: 4px;
}

/* Sous un article, l'encart reste discret */
.promo-info .commande-dz { margin-top: 16px; margin-bottom: 0; padding: 14px 16px; }
.promo-info .cdz-prix { font-size: 1.2rem; }
.promo-info .cdz-texte { font-size: .82rem; margin-bottom: .9em; }

/* =========================================================
   La vignette d'un mini-guide : sa vraie couverture
   ========================================================= */

/* La carte fermée porte l'image, plein cadre et au format des pages */
.mg-plat-image { padding: 0; background-image: none; aspect-ratio: 2 / 3; }
.mg-couverture {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  border-radius: inherit;
  transition: transform .4s ease;
}
.mg-plat-image:hover .mg-couverture { transform: scale(1.04); }

/* Le pied reste lisible par-dessus l'image */
.mg-plat-image .mg-pied {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 24px 18px;
  background: linear-gradient(180deg, rgba(20, 17, 14, 0), rgba(20, 17, 14, .72));
  margin-top: 0;
}
.mg-plat-image .mg-volets { color: rgba(255, 255, 255, .78); }

/* Dans la grille des suggestions, on cadre sur le haut de la couverture */
.mg-couverture-large {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .4s ease;
}
.card-guide:hover .mg-couverture-large { transform: scale(1.03); }

/* ---------- Le partage ---------- */
.partage { margin: 42px 0 30px; }
.partage-titre {
  margin: 0 0 14px; font-family: var(--sans);
  font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}
.partage-liste {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.partage-liste li { margin: 0; }
.partage-lien {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  color: var(--ink); text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.partage-lien:hover,
.partage-lien:focus-visible { border-color: var(--flame); color: var(--flame); }
.partage-icone { display: inline-flex; flex-shrink: 0; }
.partage-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); min-height: 1.2em; }

@media (max-width: 600px) {
  .partage-lien { padding: 0 13px; font-size: 13px; }
}

/* ---------- Le pouce sur un téléphone ---------- */
/* Un lien de navigation doit s'attraper sans viser : 44 px de haut, la
   mesure d'un pouce. Le bandeau ne grandit pas pour autant — on lui
   retire sa marge propre, ce sont les liens qui la portent. */
@media (max-width: 760px) {
  .masthead .wrap { padding-top: 0; padding-bottom: 0; }
  .masthead-links { gap: 16px; }
  .masthead-links a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }

  .site-footer a,
  .footer-nav a,
  .footer-nav li > a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  /* Dans un paragraphe, un lien reste dans la ligne : on l'élargit sans
     le sortir du texte. */
  .site-footer p a,
  .prose a,
  .breadcrumb a {
    display: inline; min-height: 0;
    padding-top: 10px; padding-bottom: 10px;
  }
  .breadcrumb a { padding-top: 13px; padding-bottom: 13px; }
  .breadcrumb { line-height: 2.6; }

  /* Les autres commandes de navigation : liens flechés, étiquettes,
     boutons du lecteur. Tout ce sur quoi on appuie pour aller ailleurs. */
  .link-arrow,
  .card-body .tag,
  .guide-card-body .tag,
  .livre-nav .btn,
  .livre-fleche {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .livre-fleche { min-width: 44px; justify-content: center; }
  .btn-sm { min-height: 44px; }

  /* Une etiquette doit rester petite a l'oeil et large sous le doigt :
     on etend la zone sensible sans toucher a son dessin. */
  .tag,
  .card-body h2 a, .card-body h3 a,
  .guide-card-body h2 a, .guide-card-body h3 a,
  .author-index a, .author-inline a,
  .cat-record-body h2 a,
  .cat-record-author a,
  .mg-legende h3 a,
  .admin-link {
    position: relative;
  }
  .tag::after,
  .card-body h2 a::after, .card-body h3 a::after,
  .guide-card-body h2 a::after, .guide-card-body h3 a::after,
  .author-index a::after, .author-inline a::after,
  .cat-record-body h2 a::after,
  .cat-record-author a::after,
  .mg-legende h3 a::after,
  .admin-link::after {
    content: ''; position: absolute; inset: -14px -8px;
  }
  .lb-btn { min-width: 44px; min-height: 44px; }
  .lightbox { background: #0c0a08; }
  .buy-btn { min-height: 44px; }
}

/* ---------- Le lecteur sur un téléphone ---------- */
.aide-etroit { display: none; }

@media (max-width: 760px) {
  /* L'étiquette « Agrandir » masquait le bas de la page : sur un écran
     étroit, l'invitation passe sous le lecteur, où elle ne gêne rien. */
  .page-image .guide-loupe { display: none; }
  .aide-large { display: none; }
  .aide-etroit { display: inline; }
  .guide-aide { letter-spacing: .1em; }

  /* La page se lit d'un doigt : le milieu agrandit, les bords tournent. */
  .page-image { cursor: zoom-in; }
  .livre-cote { width: 15%; min-width: 48px; }
}

/* =========================================================
   LES COLORIAGES
   ========================================================= */

/* ---------- Les vignettes ---------- */
.col-grille { gap: 20px; }
.col-carte {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.col-carte:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20, 17, 14, .09); }
.col-vignette {
  display: flex; align-items: center; justify-content: center;
  /* La vignette montre la planche entière : une feuille mise au format
     porte des marges blanches, et la rogner ne montrerait que du vide. */
  height: 230px; font-size: 3.4rem; overflow: hidden; padding: 10px;
  background: var(--sand, #f3efe8); border-bottom: 1px solid var(--line);
}
.col-vignette img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block; background: #fff;
  box-shadow: 0 1px 6px rgba(20, 17, 14, .12);
}
.col-carte-corps { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.col-carte-titre { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.col-carte-resume { font-size: .9rem; line-height: 1.6; color: var(--ink-3); flex: 1; }
.col-carte-lien {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--flame); margin-top: 4px;
}

/* ---------- L'atelier ---------- */
.col-entete { padding-top: 34px; }
.col-atelier {
  display: grid; grid-template-columns: 250px 1fr; gap: 30px;
  align-items: start; padding-bottom: 56px;
}
.col-palette { position: sticky; top: 90px; }
.col-teintes {
  /* Quarante-huit teintes : des pastilles un peu plus serrées, sinon la
     gamme pousse les outils hors de l'écran. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 7px;
  margin-bottom: 16px;
}
.col-teinte {
  width: 100%; aspect-ratio: 1; min-height: 34px;
  border: 2px solid var(--line); border-radius: 50%; cursor: pointer; padding: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* La pastille du choix libre : un arc-en-ciel tant qu'on n'a rien choisi */
.col-teinte-libre {
  display: block; position: relative; overflow: hidden;
  background: conic-gradient(#d1402a, #f5b921, #3f9c53, #1b6ec2, #7b4bb5, #f0a8c8, #d1402a);
}
.col-teinte-libre input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; cursor: pointer;
}
.col-teinte:hover { transform: scale(1.12); }
.col-teinte.est-choisie {
  border-color: var(--ink); transform: scale(1.16);
  box-shadow: 0 0 0 3px rgba(20, 17, 14, .12);
}
.col-titre {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4); margin: 18px 0 8px;
}
.col-titre:first-child { margin-top: 0; }
.col-liste-outils { display: flex; flex-direction: column; gap: 6px; }
.col-outil { justify-content: flex-start; min-height: 44px; }
.col-outil.est-choisie { background: var(--ink); color: #fff; border-color: var(--ink); }
.col-tailles { display: flex; gap: 8px; }
.col-taille {
  display: grid; place-items: center; flex: 1; min-height: 48px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.col-taille:hover { border-color: var(--flame); }
.col-taille.est-choisie { border-color: var(--ink); background: var(--sand, #f3efe8); }
.col-taille-rond { display: block; border-radius: 50%; background: var(--ink); }
.col-commandes { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.col-commandes .btn { min-height: 44px; }

/* La toile de peinture se glisse sous le dessin */
.col-feuille { position: relative; }
.col-toile {
  position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px);
  display: block; touch-action: none; mix-blend-mode: multiply;
}
/* Quand le pot est choisi, les clics doivent atteindre les zones dessous */
.coloriage-svg.vise-les-zones ~ .col-toile { pointer-events: none; }
.col-feuille.au-pinceau .col-toile { cursor: crosshair; }
.col-feuille .coloriage-svg { position: relative; pointer-events: none; }
.coloriage-svg.vise-les-zones { pointer-events: none; }
.coloriage-svg.vise-les-zones .zone { pointer-events: auto; cursor: pointer; }
/* Il ne reste que le compteur de zones : le paragraphe ne prend pas de
   place tant qu'il est vide. */
.col-aide { font-size: .84rem; line-height: 1.6; color: var(--ink-3); margin: 0; }
.col-aide:empty { display: none; }
.col-etat { display: block; margin-top: 6px; font-weight: 600; color: var(--ink); }
.col-etat:empty { display: none; }

.col-feuille {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 18px; box-shadow: 0 2px 14px rgba(20, 17, 14, .05);
}
.coloriage-svg { width: 100%; height: auto; display: block; }
.coloriage-svg .feuille { fill: #fff; }
.coloriage-svg .zone {
  /* Blanches, et non transparentes : une illustration des mini-guides
     se masque elle-même par ses aplats. La toile passe par-dessus en
     fusion multiplicative, donc la couleur traverse quand même. */
  fill: #fff; stroke: #14110e; stroke-width: 4; stroke-linejoin: round;
  transition: fill .12s ease;
}

/* Les details prennent un trait plus fin : le dessin respire */
.coloriage-svg .zone.fin, .coloriage-svg .trait.fin { stroke-width: 2.4; }

.coloriage-svg .zone:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }
.coloriage-svg .trait {
  fill: none; stroke: #14110e; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
/* La signature n'est pas une zone à colorier : elle reste vermillon */
.coloriage-svg .signature { pointer-events: none; }
.coloriage-svg .signature-nom {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; fill: #d1402a;
}
.col-note {
  grid-column: 2; font-size: .84rem; line-height: 1.7;
  color: var(--ink-3); margin-top: 14px;
}

@media (max-width: 900px) {
  .col-atelier { grid-template-columns: 1fr; }
  .col-palette { position: static; }

  /* ── Le dessin avant les outils ──
     La palette venait en premier : huit cent cinquante points de
     couleurs à franchir avant de voir ce qu'on colorie. */
  .col-feuille { order: -1; }
  .col-agrandir { order: -2; }
  .col-note { grid-column: 1; }
}


/* ---------- Une planche déposée ---------- */
.coloriage-image {
  display: block; width: 100%; height: auto; position: relative;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.col-feuille[data-planche-image] { position: relative; }
.col-signature {
  /* Une planche est dessinée jusqu'au bord : sans ce fond, la signature
     se perdrait dans les palmiers ou les toits. */
  position: absolute; right: 16px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #d1402a; pointer-events: none;
}
.col-signature svg { width: 20px; height: 20px; flex: none; }
.col-signature-nom {
  font-size: .58rem; font-weight: 700; letter-spacing: 1.4px;
  color: #d1402a; white-space: nowrap; line-height: 1;
}

/* ---------- Emporter et partager ---------- */
.col-sorties {
  grid-column: 2; margin-top: 18px; padding: 14px 16px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
}
.col-sorties-titre {
  margin: 0 0 10px; font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.col-sorties-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.col-sorties-note {
  margin: 10px 0 0; font-size: .8rem; line-height: 1.6; color: var(--ink-3);
}
.col-partage { grid-column: 2; margin-top: 10px; }

@media (max-width: 900px) {
  .col-sorties, .col-partage { grid-column: 1; }
}

/* ---------- À l'impression : la feuille, et rien d'autre ----------
 *
 * L'enfant reçoit une feuille de dessin, pas une page web imprimée :
 * ni titre, ni fil d'Ariane, ni bandeau du site. Seuls restent le
 * coloriage et la signature de la maison.
 *
 * La marge de page est mise à zéro exprès : c'est dans cette marge que
 * le navigateur écrit l'adresse et la date. La respiration autour du
 * dessin est reprise sur la feuille elle-même.
 */
@media print {
  .site-header, .masthead, .site-footer, .breadcrumb,
  .col-palette, .col-note, .band, .skip-link,
  .col-sorties, .col-partage, .col-entete { display: none !important; }

  .col-page { padding: 0 !important; margin: 0 !important; }
  .col-atelier {
    display: block; padding: 8mm; margin: 0; max-width: none; width: auto;
  }
  .col-feuille { border: 0; box-shadow: none; padding: 0; }

  .coloriage-svg, .coloriage-image { width: 100%; height: auto; max-height: 96vh; }

  /* Le coloriage de l'enfant et la signature doivent sortir en couleur */
  .col-feuille, .col-toile, .coloriage-svg, .coloriage-image, .col-signature {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .col-signature { display: inline-flex !important; }

  @page { margin: 0; }
}

/* ================= Le puzzle ================= */
/* Des cases larges, des morceaux qu'on attrape sans viser : la page est
   faite pour des doigts d'enfant avant d'être faite pour une souris. Le
   tas de morceaux se tient à côté du plateau, jamais en dessous : à cet
   âge-là, on ne fait pas glisser une pièce en faisant défiler la page. */
/* La colonne de la page est une boîte flexible : sans largeur imposée, le
   jeu se réduirait à la taille de son contenu au lieu de l'occuper. */
.pz { margin-top: 8px; width: 100%; }

.pz-barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.pz-niveaux { display: flex; gap: 6px; }
.pz-niveau {
  min-width: 0; padding: 10px 16px;
  font: inherit; font-weight: 700; font-size: 1rem;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.pz-niveau:hover { border-color: var(--ink-3); }
.pz-niveau.est-actif { background: var(--ink); color: #fff; border-color: var(--ink); }

.pz-compte { margin: 0; font-weight: 700; }
.pz-compte-mot { font-weight: 400; color: var(--ink-3); }
.pz-commandes { display: flex; gap: 8px; margin-left: auto; }

/* Un seul cadre : le plateau, le modèle et le tas de morceaux tiennent
   à l'intérieur du jeu, et non éparpillés dans la page. */
.pz-jeu {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px;
  padding: 16px; border-radius: var(--r-md, 14px);
  background: #f6f2ea; border: 1px solid var(--line);
}
.pz-table { position: relative; flex: 1 1 420px; max-width: 620px; }
.pz-cote { flex: 1 1 240px; min-width: 220px; }

/* Le modèle : l'image entière, en petit, toujours sous les yeux */
.pz-modele { margin: 0 0 14px; }
.pz-modele img {
  display: block; width: 100%; max-width: 220px; height: auto;
  border-radius: 6px; border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(20, 17, 14, .16);
}
.pz-modele figcaption {
  margin-top: 6px; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Le plateau porte l'image en très pâle : un repère, pas une réponse */
.pz-plateau {
  display: grid;
  grid-template-columns: repeat(var(--colonnes, 4), 1fr);
  grid-template-rows: repeat(var(--lignes, 3), 1fr);
  gap: 2px; width: 100%;
  padding: 6px; border-radius: var(--r-sm);
  background-color: #f3efe6; background-size: cover; background-position: center;
  border: 2px dashed var(--line);
  box-shadow: inset 0 0 0 100vmax rgba(253, 250, 243, .9);
}
.pz.montre-modele .pz-plateau { box-shadow: inset 0 0 0 100vmax rgba(253, 250, 243, .1); }

.pz-case {
  position: relative; border-radius: 4px;
  background: rgba(255, 255, 255, .5);
  outline: 1px solid rgba(20, 17, 14, .08);
  transition: background .15s, outline-color .15s;
}
.pz-case { outline: 1px solid rgba(255, 255, 255, .5); }
/* La case vide : c'est elle qui fait avancer le jeu, elle se voit */
.pz-case:empty {
  background: rgba(20, 17, 14, .06);
  outline: 2px dashed rgba(20, 17, 14, .18); outline-offset: -3px;
}
.pz-case.est-bloquee { animation: pz-secoue .28s; }
@keyframes pz-secoue {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.pz-piece { transition: none; }

/* Un morceau : la même photo, décalée derrière sa fenêtre */
.pz-piece {
  display: block; padding: 0; border: 0; border-radius: 4px;
  background-color: transparent; background-repeat: no-repeat;
  cursor: grab; touch-action: none;
  box-shadow: 0 1px 4px rgba(20, 17, 14, .18);
}
.pz-piece:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }
.pz-piece.est-choisie {
  outline: 3px solid var(--flame); outline-offset: 2px;
  transform: scale(1.04); z-index: 5;
}
.pz-piece.est-portee {
  position: fixed; z-index: 60; cursor: grabbing;
  box-shadow: 0 12px 28px rgba(20, 17, 14, .3);
  transform: scale(1.06); pointer-events: none;
}
/* Un morceau occupe toute sa case, et reste attrapable tant que la
   partie dure : il peut aller n'importe où, autant de fois qu'on veut. */
.pz-case .pz-piece {
  position: absolute; inset: 0; width: 100%; height: 100%;
  box-shadow: none; border-radius: 3px;
}
.pz-case .pz-piece:disabled { cursor: default; }

/* Le tas : des morceaux assez gros pour un doigt, quel que soit l'écran */

.pz-credit { margin-top: 18px; color: var(--ink-3); font-size: .8rem; }

/* display:grid l'emporterait sur l'attribut hidden : on le dit ici */
.pz-bravo[hidden] { display: none; }
/* Le départ : l'image est entière, on la regarde, et on lance quand on
   veut. Le bouton se pose dessus sans la masquer. */
.pz-depart {
  position: absolute; inset: auto 8px 8px; display: grid; justify-items: center; gap: 6px;
  padding: 14px 18px; border-radius: var(--r-sm);
  background: rgba(253, 250, 243, .94);
  box-shadow: 0 6px 20px rgba(20, 17, 14, .18);
}
.pz-depart[hidden] { display: none; }
.pz-depart-note { margin: 0; font-size: .84rem; color: var(--ink-3); }
.pz.est-prete .pz-plateau { box-shadow: none; border-style: solid; }
.pz.est-prete .pz-case { outline: none; }

/* Le message de fin ne cache pas l'image : l'enfant vient de la
   reconstituer, c'est elle la récompense. Il se pose en bandeau. */
.pz-bravo {
  position: absolute; inset: auto 8px 8px; display: grid; justify-items: center; gap: 8px;
  text-align: center; padding: 14px 18px; border-radius: var(--r-sm);
  background: rgba(253, 250, 243, .94);
  box-shadow: 0 6px 20px rgba(20, 17, 14, .18);
}
.pz-bravo-mot { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; color: var(--flame); }
.pz-bravo-note { margin: 0; color: var(--ink-3); }
.pz.est-fini .pz-cote { display: none; }
.pz.est-fini .pz-plateau { box-shadow: none; border-style: solid; }
.pz.est-fini .pz-table { max-width: none; }

/* Sur un téléphone, le plateau prend toute la largeur et les morceaux du
   tas font exactement la taille d'une case : un morceau plus gros que sa
   place, c'est une promesse qu'on ne tient pas. */
/* Sur un téléphone, le plateau prend toute la largeur et le modèle passe
   au-dessus, en petit : il doit rester visible sans faire défiler. */
@media (max-width: 700px) {
  .pz-jeu { flex-direction: column-reverse; }
  .pz-table, .pz-cote { flex: 1 1 100%; max-width: none; width: 100%; }
  .pz-cote { display: flex; align-items: center; gap: 14px; }
  .pz-modele { margin: 0; }
  .pz-modele img { max-width: 110px; }
}
@media (max-width: 640px) {
  .pz-commandes { margin-left: 0; }
}

/* Les deux sections de la page « Jeux et coloriages » */
.atelier-note { margin: -6px 0 18px; color: var(--ink-3); max-width: 62ch; }
.section-head.atelier-suite { margin-top: 44px; }

/* Un bouton de départ à la mesure d'une main d'enfant */
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }


/* =========================================================
   LE ROSE
   ========================================================= */

/* ---- Une bande rose pale ----
   Sous l atelier des enfants et sous les mini-guides du catalogue.
   Assez teinte pour qu on voie que la page change de sujet, assez
   pale pour que le texte noir s y lise sans effort. */
.band-rose {
  background: var(--rose-tint);
  border-top: 1px solid var(--rose-pale);
  border-bottom: 1px solid var(--rose-pale);
}
.band-rose .section-head h2 { color: var(--ink); }
.band-rose .link-arrow { color: var(--rose-dark); }
.band-note {
  margin: -6px 0 26px;
  color: var(--ink-3);
  font-size: .95rem;
}

/* ---- L atelier des enfants, sur l accueil ----
   Une invitation : ce qu on y fait a gauche, de quoi le voir a droite.
   Les planches se posent en eventail, legerement tournees les unes sur
   les autres, comme des feuilles sur une table. C est ce qu on en fait
   — on les imprime, on les etale — et cela se lit avant le texte. */
.atelier-appel { padding: 54px 0; }
.atelier-appel-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}
.atelier-surtitre {
  display: block; font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700;
  color: var(--rose-dark); margin-bottom: 10px;
}
.atelier-mots h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 14px; line-height: 1.1;
}
.atelier-mots p { color: var(--ink-2); margin: 0 0 22px; max-width: 46ch; }

.btn-rose {
  background: var(--rose); color: #fff; border: 1px solid var(--rose);
  font-weight: 600;
}
.btn-rose:hover { background: var(--rose-dark); border-color: var(--rose-dark); color: #fff; }

/* Le second bouton d'une paire : il propose, il n'appelle pas. Bordé
   plutôt que rempli, pour qu'un seul des deux tire l'œil. */
.btn-contour-rose {
  background: transparent;
  color: var(--rose-dark);
  border: 1px solid var(--rose);
  font-weight: 600;
}
.btn-contour-rose:hover { background: var(--rose); border-color: var(--rose); color: #fff; }

.atelier-eventail {
  /* Une hauteur ferme et des feuilles en points fixes.

     La premiere version les dimensionnait en pourcentage de la colonne.
     Sous 860 points la mise en pages passe a une seule colonne : la
     colonne faisait alors toute la largeur, les feuilles ont grandi
     d autant, et elles sont sorties de la bande — par-dessus le texte,
     par-dessus le pied de page. Un pourcentage n a de sens que si l on
     sait de quoi ; ici on ne le savait pas.

     Le debordement est masque en dernier recours : quoi qu il arrive,
     rien ne sort de la bande. */
  position: relative;
  height: 260px;
  overflow: hidden;
}
.eventail-feuille {
  position: absolute; top: 50%; left: 50%;
  width: 150px; height: 200px;
  margin: -100px 0 0 -75px;
  background: #fff; border: 1px solid var(--rose-pale);
  border-radius: var(--r-sm); overflow: hidden;
  box-shadow: 0 12px 30px rgba(196, 58, 99, .16);
  transition: transform .25s ease;
}
.eventail-feuille img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eventail-1 { transform: rotate(-10deg) translateX(-168px); z-index: 1; }
.eventail-2 { transform: rotate(-4deg)  translateX(-56px);  z-index: 2; }
.eventail-3 { transform: rotate(4deg)   translateX(56px);   z-index: 3; }
.eventail-4 { transform: rotate(10deg)  translateX(168px);  z-index: 4; }
.atelier-appel:hover .eventail-1 { transform: rotate(-14deg) translate(-180px, -8px); }
.atelier-appel:hover .eventail-4 { transform: rotate(14deg)  translate(180px, -8px); }

@media (max-width: 860px) {
  .atelier-appel-inner { grid-template-columns: 1fr; gap: 28px; }
}
/* Sur un telephone, deux feuilles suffisent : quatre se chevaucheraient
   au point de ne plus rien montrer. */
@media (max-width: 560px) {
  .atelier-eventail { height: 220px; }
  .eventail-feuille { width: 120px; height: 160px; margin: -80px 0 0 -60px; }
  .eventail-1, .eventail-4 { display: none; }
  .eventail-2 { transform: rotate(-5deg) translateX(-46px); }
  .eventail-3 { transform: rotate(5deg)  translateX(46px); }
}
@media (prefers-reduced-motion: reduce) {
  .eventail-feuille, .atelier-appel:hover .eventail-1,
  .atelier-appel:hover .eventail-4 { transition: none; }
}

/* ---- L appel a manuscrits ----
   Le seul aplat plein de la page. C est voulu : c est la seule chose
   qu on y demande au lecteur, et elle doit se voir sans qu on la
   cherche. */
.appel-manuscrits {
  background: var(--rose);
  color: #fff;
  padding: 56px 0;
}
/* `est-en-tete` a été retiré : l'appel à manuscrits ne commence plus
   la page d'accueil, il la termine. Vérifié — la classe n'était posée
   par aucune vue. Une règle que plus rien ne peut atteindre est une
   règle qu'on relira un jour en croyant qu'elle agit. */
/* Les deux liens que portait le bloc d ouverture. Discrets : ce sont
   des chemins, pas la demande de la page. */
.appel-ailleurs {
  display: flex; gap: 18px; margin-top: 4px;
  font-size: .88rem;
}
.appel-ailleurs a {
  color: rgba(255, 255, 255, .9);
  text-underline-offset: 3px;
}
.appel-ailleurs a:hover { color: #fff; }
.appel-inner {
  display: flex; gap: 40px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.appel-texte { flex: 1 1 420px; max-width: 640px; }
.appel-surtitre {
  display: block; font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700;
  color: rgba(255, 255, 255, .78); margin-bottom: 8px;
}
.appel-manuscrits h2 {
  color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  margin: 0 0 12px; line-height: 1.15;
}
.appel-manuscrits p {
  color: rgba(255, 255, 255, .92); margin: 0; max-width: 58ch;
}
.appel-actions {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.btn-blanc {
  background: #fff; color: var(--rose-dark);
  border: 1px solid #fff; font-weight: 600;
}
.btn-blanc:hover { background: var(--rose-tint); color: var(--rose-dark); }
.appel-mail {
  color: rgba(255, 255, 255, .92); font-size: .9rem;
  text-underline-offset: 3px;
}
.appel-mail:hover { color: #fff; }

@media (max-width: 720px) {
  .appel-manuscrits { padding: 40px 0; }
  .appel-inner { gap: 24px; }
}


/* =========================================================
   LE FOND DE L EN-TETE ET DU PIED DE PAGE
   =========================================================

   Quatre teintes nommees, reglables depuis l administration. Chacune
   emporte avec elle la couleur du texte, des liens et des traits :
   c est tout l interet de nommer les teintes plutot que d offrir un
   choix libre de couleur. Un choix libre laisse poser du noir sur du
   noir, et l on ne s en apercoit qu une fois la page publiee.

   Le pied de page etait deja sombre en dur ; il suit maintenant son
   reglage, et sa valeur par defaut donne exactement ce qu il etait. */

/* ---- L en-tete ---- */
.site-header.fond-clair { background: var(--bg); border-bottom: 1px solid var(--line); }

.site-header.fond-noir,
.site-header.fond-vermillon,
.site-header.fond-rose { border-bottom: 0; }

.site-header.fond-noir      { background: var(--ink); }
.site-header.fond-vermillon { background: var(--flame); }
.site-header.fond-rose      { background: var(--rose); }

/* Ce qui se pose dessus, quand le fond est sombre. Les trois teintes
   foncees partagent le meme traitement : on ne le repete pas. */
.site-header.fond-noir,
.site-header.fond-vermillon,
.site-header.fond-rose,
.site-header.fond-noir a,
.site-header.fond-vermillon a,
.site-header.fond-rose a { color: #fff; }

/* Le nom de la maison : il porte sa propre encre, qui ne suit pas
   l heritage. Il faut la nommer, sinon le nom reste noir sur noir. */
.site-header.fond-noir .brand-text strong,
.site-header.fond-vermillon .brand-text strong,
.site-header.fond-rose .brand-text strong { color: #fff; }
.site-header.fond-noir .brand-text small,
.site-header.fond-vermillon .brand-text small,
.site-header.fond-rose .brand-text small { color: rgba(255, 255, 255, .7); }

/* Le bouton du menu est trace au trait, et ses trois barres ont une
   couleur de fond, pas de texte : sans cette regle il disparait. */
.site-header.fond-noir .nav-toggle span,
.site-header.fond-vermillon .nav-toggle span,
.site-header.fond-rose .nav-toggle span { background: #fff; }

.site-header.fond-noir .site-nav a:hover,
.site-header.fond-vermillon .site-nav a:hover,
.site-header.fond-rose .site-nav a:hover { color: rgba(255, 255, 255, .78); }

/* Le bouton au trait de l en-tete : son cerne aussi. */
.site-header.fond-noir .btn-outline,
.site-header.fond-vermillon .btn-outline,
.site-header.fond-rose .btn-outline {
  color: #fff; border-color: rgba(255, 255, 255, .5);
}
.site-header.fond-noir .btn-outline:hover,
.site-header.fond-vermillon .btn-outline:hover,
.site-header.fond-rose .btn-outline:hover {
  background: rgba(255, 255, 255, .12); border-color: #fff;
}

/* ---- Le pied de page ---- */
.site-footer.fond-noir      { background: var(--ink); }
.site-footer.fond-vermillon { background: var(--flame-dark); }
.site-footer.fond-rose      { background: var(--rose-dark); }
.site-footer.fond-clair {
  background: var(--bg-2);
  color: var(--ink-3);
  background-image: radial-gradient(circle, rgba(20, 17, 14, .07) 1px, transparent 1px);
  border-top: 1px solid var(--line);
}
.site-footer.fond-clair a,
.site-footer.fond-clair strong,
.site-footer.fond-clair .footer-brand strong { color: var(--ink); }
.site-footer.fond-clair .footer-pub,
.site-footer.fond-clair .footer-note,
.site-footer.fond-clair .colophon { color: var(--ink-3); }


/* =========================================================
   LA FABRIQUE, OUVERTE
   =========================================================

   L atelier de la maison sur le site public. La colonne des reglages a
   gauche, l ecriture et les pages a droite. */

/* Un atelier n'est pas une page de présentation : son en-tête dit ce
   qu'on peut faire, en trois lignes, et laisse la place au travail.
   Elle mesurait 441 px — la moitié d'un écran de portable. */
.fb-tete { background: var(--bg-2); padding: 30px 0 24px; border-bottom: 1px solid var(--line); }
.fb-surtitre {
  display: block; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--flame); margin-bottom: 10px;
}
.fb-tete h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 10px; }
.fb-tete .lead { max-width: 68ch; margin: 0 0 8px; font-size: 1rem; }
.fb-discret { font-size: .88rem; color: var(--ink-3); margin: 0; }

/* ── La colonne des réglages est à gauche, mais elle vient après ──

   Dans le document, la surface d'écriture passe la première : c'est ce
   qu'on est venu faire. `order` la renvoie à droite quand l'écran est
   assez large pour deux colonnes, et l'ordre du document reprend ses
   droits dès qu'elles se rangent l'une sous l'autre.

   La bascule descend à 860 px : une colonne de 260 et une feuille de
   148 mm tiennent à partir de là. À 900, un ordinateur portable dont
   la fenêtre n'est pas plein écran basculait en une colonne pour rien. */
.fb {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px; align-items: start; padding-top: 26px; padding-bottom: 56px;
}
.fb-reglages { order: -1; }

/* ---- Ce qu on regle ---- */
/* ── Le rail suit la lecture ──

   Il était déjà `sticky`, et cela ne servait à rien : il mesure plus
   haut que l'écran — les choix, le plan du livre, les quinze mesures,
   les trois sorties. Un bloc plus grand que la fenêtre ne colle pas,
   il défile comme le reste. Dès qu'on descendait pour écrire, le plan
   du livre sortait par le haut.

   On le borne à la hauteur de la fenêtre et on le fait défiler chez
   lui. Il reste alors sous les yeux pendant toute la rédaction, et le
   plan se remplit à mesure qu'on écrit. */
.fb-reglages {
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 10px; padding: 18px;
  background: #fff;
}
/* Sur grand écran les deux moitiés ne forment qu'un panneau : un
   filet les sépare, rien de plus. */
.fb-infos { border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 14px; }
.fb-champ { margin-bottom: 14px; }
.fb-champ label {
  display: block; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3); margin-bottom: 5px;
}
.fb-champ select, .fb-champ input {
  width: 100%; padding: 7px 9px; font-size: .92rem;
  border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink);
}
.fb-aide { font-size: .8rem; color: var(--ink-3); margin: 6px 0 0; }

.fb-mesures {
  margin: 18px 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .82rem;
}
.fb-mesures div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.fb-mesures dt { color: var(--ink-3); }
.fb-mesures dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }

.fb-actions { display: grid; gap: 8px; }

/* ---- Ecrire, et voir ---- */
.fb-onglets { display: flex; gap: 8px; margin-bottom: 16px; }
.fb-onglet {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-size: .9rem; color: var(--ink-3);
}
.fb-onglet.est-choisi { border-color: var(--ink); color: var(--ink); font-weight: 600; }

/* La surface d ecriture : nue, large, et dans la romane du site. Ce
   n est pas la page composee — c est le brouillon d avant. */
/* ── La surface d'écriture EST la page ──

   Premier état : une boîte blanche ordinaire, en Lora 17 px sur toute
   la largeur de la colonne. On choisissait un genre à gauche, les
   mesures changeaient dans le panneau — et le texte ne bougeait pas
   d'un cheveu. Le formulaire ne commandait rien de ce qu'on voyait en
   écrivant.

   Elle prend donc les vraies mesures : la largeur du format, les
   quatre marges, les caractères, le corps, l'interligne et la
   justification. Ce sont les mêmes variables que la feuille à
   imprimer lit — pas des valeurs approchantes recopiées ici. Les
   coupures de ligne qu'on voit en écrivant sont donc celles du livre.

   Ce qui n'y est pas : la coupure des PAGES. La surface est un
   placard — une seule colonne qui s'allonge. L'onglet « Les pages »
   montre où elles tombent. */

/* ================================================================
   La pile de feuilles
   ================================================================

   De vraies pages : blanches, au format choisi, avec leurs quatre
   marges, un blanc entre elles et leur ombre. La surface d'écriture est
   posée par-dessus, transparente — le texte paraît donc SUR les
   feuilles, et passe de l'une à l'autre grâce aux cales.

   La première version montrait une seule hauteur de page, le texte
   glissant derrière comme un rouleau. La deuxième page n'avait alors
   pas de marge en haut : le texte y commençait collé au bord. Ça ne
   ressemblait pas à un livre. */

.fb-pile {
  position: relative;
  zoom: var(--zoom-ecrire, 1);
  width: var(--pl);
  max-width: 100%;
  margin: 0 auto;
}

/* Les feuilles, derrière. Elles ne reçoivent aucun clic : c'est la
   surface au-dessus qui prend tout, sinon on toucherait le papier au
   lieu du texte. */
.fb-feuilles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fb-feuille-vive {
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 18px rgba(20, 17, 14, .18);
}

/* La cale : le bloc vide qui fait enjamber le bord d'une feuille. Elle
   appartient à l'atelier, jamais au livre — `texteDeLaSurface` la
   retire avant que quoi que ce soit ne sorte d'ici. */
.fb-cale {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  /* On ne pose pas le curseur dedans : ce n'est pas du texte. */
  user-select: none;
  -webkit-user-select: none;
}

/* Combien de feuilles, sous la pile. */
.fb-tourne {
  margin: 14px 0 0;
  text-align: center;
}
.fb-tourne-etat {
  font-size: .82rem;
  color: var(--rose-dark);
  font-variant-numeric: tabular-nums;
}

.fb-ecrire .fb-page {
  /* ── La surface est TRANSPARENTE ──

     Ce ne sont plus elle qui fait la page : ce sont les feuilles
     dessinées derrière. Elle garde les marges latérales et celle du
     haut — elles placent le texte sur la première feuille — mais plus
     de blanc ni d'ombre, qui masqueraient la pile et redonneraient une
     seule grande page. La réduction vit sur la pile, pour que les
     feuilles et le texte se réduisent ensemble. */
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: var(--ph);
  margin: 0;
  box-sizing: border-box;
  padding: var(--mt) var(--me) 0 var(--mi);

  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;

  font-family: var(--police-texte, var(--serif));
  font-size: var(--corps, 11pt);
  line-height: var(--interligne, 4.5mm);
  color: var(--ink);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.fb-ecrire .fb-page:focus-visible {
  box-shadow: 0 3px 18px rgba(20, 17, 14, .18), 0 0 0 2px var(--rose);
}

/* Les mêmes règles de paragraphe que la page imprimée : alinéa partout,
   sauf sur le premier d'un titre — un alinéa après un titre est une
   faute de composition, pas un choix. */
.fb-ecrire .fb-page p { margin: 0; text-indent: 1.2em; }
.fb-ecrire .fb-page h2 + p,
.fb-ecrire .fb-page h3 + p,
.fb-ecrire .fb-page > p:first-child { text-indent: 0; }

.fb-ecrire .fb-page h2,
.fb-ecrire .fb-page h3 {
  font-family: var(--police-titre, var(--sans));
  line-height: 1.2;
  text-align: left;
  hyphens: none;
}
.fb-ecrire .fb-page h2 { font-size: calc(var(--corps, 11pt) * 1.7); margin: 1.4em 0 .5em; }
.fb-ecrire .fb-page h3 { font-size: calc(var(--corps, 11pt) * 1.2); margin: 1.2em 0 .4em; }

/* La feuille est posée sur une table, pas collée au bord du panneau. */
.fb-ecrire { background: var(--bg-3); border-radius: 8px; padding: 22px 0 26px; }

.fb-compte { font-size: .82rem; color: var(--ink-3); margin: 10px 0 0; }

/* Les pages composees : le metteur en pages de la maison pose ici ses
   feuilles, avec sa propre feuille de style. On ne lui met qu un fond
   pour les detacher. */
/* La planche est large, et sa largeur est juste : c'est celle du livre.
   Elle défile donc dans sa propre boîte plutôt que de pousser la page. */
.fb-pages {
  background: var(--bg-3); border-radius: 8px; padding: 20px 0;
  overflow-x: auto;
}

@media (max-width: 860px) {
  /* `minmax(0, 1fr)` et non `1fr` : une piste `1fr` se laisse étirer
     par le contenu le plus large qu'elle porte. Une planche seule
     mesure DEUX pages — la page de droite est poussée par une marge
     d'une pleine largeur, pour tomber où elle tombera dans le livre —
     et la colonne passait à 1119 px dans une fenêtre de 832. Toute la
     page partait de travers. */
  .fb { grid-template-columns: minmax(0, 1fr); }

  /* ── En une colonne, le panneau se défait ──

     `display: contents` fait disparaître la boîte et rend ses deux
     moitiés directement placçables : les CHOIX remontent avant la
     feuille, les MESURES et les sorties descendent après.

     Sans cela il fallait trancher entre deux mauvaises solutions :
     tout le panneau au-dessus — mille cent pixels de formulaire avant
     de voir où écrire — ou tout en dessous, et changer de genre
     devenait un voyage. */
  .fb-reglages {
    display: contents;
    /* Le rail n'existe plus : ses deux moities sont des blocs a part,
       et rien ne doit les borner. */
    max-height: none;
    overflow: visible;
  }
  .fb-choix {
    order: -1;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff;
    /* Les six choix en deux colonnes : ils tiennent alors sous la
       hauteur d'un pouce, au lieu de dérouler sur un demi-écran. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    align-items: end;
  }
  .fb-choix .fb-champ { margin-bottom: 10px; }
  /* L'aide sous un menu prend deux lignes et casse l'alignement :
     elle se lit sur grand écran, elle encombre ici. */
  .fb-choix .fb-aide { display: none; }
  .fb-champ-gabarit {
    grid-column: 1 / -1;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 10px;
  }

  .fb-infos {
    order: 1;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    background: #fff;
  }
}

/* ── L'impression ──

   On n'imprime que les pages composées. Tout le reste — l'en-tête du
   site, les réglages, les onglets, la surface d'écriture, le lecteur,
   l'appel à manuscrits — disparaît.

   La ligne qui manquait : `.fb-feuilleter`. Le lecteur ne se cachait
   pas, et qui imprimait depuis l'onglet « Feuilleter » sortait le
   livre ET sa visionneuse, l'une sur l'autre.

   Et surtout : un panneau d'onglet fermé porte l'attribut `hidden`,
   donc `display: none`. Le panneau des pages étant fermé tant qu'on
   écrit, l'impression sortait UNE FEUILLE BLANCHE. On le rouvre pour
   l'impression, quoi qu'il arrive. */
@media print {
  .site-header, .site-footer, .fb-tete, .fb-reglages, .fb-onglets,
  .fb-ecrire, .fb-feuilleter, .fb-emporter, .appel-manuscrits,
  .masthead { display: none !important; }

  .fb { display: block; padding: 0; }

  /* `[hidden]` vaut `display: none` : sans cette ligne, imprimer
     depuis l'onglet « Écrire » ne donnait rien du tout. */
  .fb-pages,
  .fb-pages[hidden] {
    display: block !important;
    background: none;
    padding: 0;
    /* ── Et surtout : plus de boîte qui défile ──

       À l'écran, la planche défile dans sa propre boîte pour ne pas
       pousser la page de travers. À l'impression, cette même boîte
       COUPE : un conteneur qui défile ne s'imprime que sur la hauteur
       qu'on en voit, et tout ce qui suit disparaît. Le livre sortait
       amputé de tout ce qui dépassait du premier écran.

       Ce qui vaut pour l'écran ne vaut pas pour le papier : sur le
       papier il n'y a rien à faire déborder, chaque feuille a sa
       propre page. */
    overflow: visible !important;
  }

  /* Aucun ancêtre ne doit couper non plus : il suffit d'un pour
     emporter la fin du livre. */
  .fb, .fb-travail, .wrap, main, body {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}


/* ==================================================================
   La fabrique, sur l'accueil
   ==================================================================

   Rose plein, et non pas rose pale : la bande de l'atelier des
   enfants, juste en dessous, est deja en rose-tint. Deux bandes
   claires collees l'une a l'autre se seraient fondues en une seule
   longue zone rose ou l'oeil ne voit plus de separation. Ici le rose
   est le fond, et c'est la page blanche qui ressort.

   L'esprit est celui de l'atelier : des feuilles posees de travers,
   des pastilles rondes, un gros bouton. On ne montre pas un outil de
   metier, on propose un jeu. */

/* ── Un rose atténué ──

   La bande était un aplat de fuchsia pleine largeur, en tête de la
   page d'accueil : le premier écran du site criait. Le rose reste —
   c'est celui de la maison — mais il passe au papier, et le texte
   redevient de l'encre. Ce qui appuie, ce sont maintenant les
   pastilles et le bouton, pas le fond.

   Un filet en bas tient la bande, qui sinon flotterait sur le blanc
   de la section suivante. */
.fabrique-appel {
  background: var(--rose-tint);
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--rose-pale);
  overflow: hidden;   /* les feuilles penchees ne debordent pas la page */
}

.fabrique-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 60px;
  align-items: center;
}

/* `fabrique-surtitre` est retiré : la pastille « Nouveau · l'atelier
   est ouvert » n'est plus posée par aucune vue. */

/* `h1` autant que `h2` : la bande ouvre la page d'accueil, où son
   titre est le titre de la page ; ailleurs elle reste une section. */
.fabrique-appel h1,
.fabrique-appel h2 {
  color: var(--ink);
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.fabrique-lead {
  color: var(--ink-3);
  max-width: 44ch;
  margin: 0 0 24px;
  font-size: 1.05rem;
}

/* ── Les trois faits ──
   Chacun tient dans un nombre. Une pastille blanche le porte : on le
   lit avant la phrase, et les trois se retiennent d'un coup d'oeil. */
.fabrique-points {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fabrique-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .96rem;
  color: var(--ink);
}

.fp-pastille {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--rose);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .95rem;
  /* Chaque pastille penche un peu, et pas toutes du meme cote :
     droites et alignees, elles feraient un tableau. */
  transform: rotate(-6deg);
}
.fp-2 { transform: rotate(5deg); }
.fp-3 { transform: rotate(-3deg); }

.fabrique-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.fabrique-note {
  font-size: .86rem;
  color: var(--ink-3);
}

/* ── La pile de feuilles ──
   Un livre n'est jamais une feuille : on en pose trois, decalees et
   penchees, et la vraie page composee est celle du dessus. */
.fabrique-pile {
  position: relative;
  width: 260px;
  justify-self: center;
}

.fp-feuille,
.fp-page {
  display: block;
  width: 260px;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(90, 20, 45, .13);
}

/* Les deux feuilles du dessous étaient blanches sur du fuchsia. Sur
   du papier rose, elles ne se détachent plus : on les borde. */
.fp-feuille {
  position: absolute;
  inset: 0;
  height: 100%;
  background: #fff;
  border: 1px solid var(--rose-pale);
}

.fp-feuille-3 { transform: rotate(-7deg); opacity: .55; }
.fp-feuille-2 { transform: rotate(4deg);  opacity: .8; }

.fp-page {
  position: relative;
  height: auto;
  transform: rotate(-1.5deg);
}

@media (max-width: 900px) {
  .fabrique-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .fabrique-pile { margin: 0 auto; }
}

/* ── La barre de la fabrique publique ──
   Des mots, pas des signes. Un « B » suppose qu'on a deja vu un
   traitement de texte ; « Gras » ne suppose rien. La barre reste
   collee en haut de la surface pendant qu'on descend dans le texte :
   la chercher en remontant, c'est perdre l'endroit ou l'on ecrivait. */
.fb-barre {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--rose-tint);
  border: 1px solid var(--rose-pale);
  border-radius: 10px 10px 0 0;
  border-bottom: 0;
}

.fb-outil {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--rose-pale);
  border-radius: 999px;
  /* Serré exprès : treize commandes tenaient sur TROIS rangées, et
     « Rétablir » se retrouvait seul sur la dernière. Chaque rangée de
     barre, c'est autant de moins qu'on voit de sa page. */
  padding: 6px 12px;
  cursor: pointer;
  line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
}
.fb-outil:hover { background: var(--rose-pale); }
.fb-outil.est-actif {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}
.fb-outil b, .fb-outil i { font-weight: 700; }
.fb-outil i { font-style: italic; font-weight: 400; }

.fb-sep {
  width: 1px;
  height: 20px;
  background: var(--rose-pale);
  margin: 0 4px;
}

/* Le compte se range a droite : c'est un renseignement, pas une
   commande, et il ne doit pas se lire dans la file des boutons. */
.fb-etat {
  margin-left: auto;
  font-size: .8rem;
  color: var(--rose-dark);
  font-variant-numeric: tabular-nums;
}

/* La barre ne se soude plus à la surface : depuis que celle-ci est une
   feuille posée au milieu d'un fond, les raccorder ferait une boîte
   blanche qui déborde de la page. La barre se referme donc sur elle. */
.fb-barre { border-radius: 10px; border-bottom: 1px solid var(--rose-pale); }

/* ================================================================
   L'atelier sur un téléphone
   ================================================================

   Mesuré sur un écran de 375 : la barre d'outils faisait SEPT lignes
   — deux cent trente-neuf pixels — et la feuille où l'on écrit
   commençait à mille dix-neuf pixels du haut. On arrivait dans un
   atelier d'écriture en défilant une fois et demie l'écran.

   C'est la même faute que celle corrigée sur grand écran, et elle
   avait survécu ici parce qu'on ne l'avait regardée que sur un
   ordinateur. */

/* `screen` et non tous les médias : une feuille A4 imprimée depuis
   un téléphone passe sous 640 px, et ces règles — la feuille à 100 %,
   la barre qui défile — s'appliqueraient au livre imprimé. */
@media screen and (max-width: 640px) {

  /* ── L'en-tête ──
     Deux cent quatre-vingts pixels de présentation avant l'établi.
     Le texte reste — il dit à quoi sert la page — mais serré. */
  .fb-tete { padding: 22px 0 18px; }
  .fb-tete h1 { font-size: 1.6rem; margin-bottom: 6px; }
  .fb-tete .lead { font-size: .92rem; margin-bottom: 8px; }
  .fb-passerelle { font-size: .84rem; margin: 0; }

  /* ── La barre : une seule ligne, qui glisse ──
     Quinze commandes ne tiennent pas de front sur un téléphone. Elles
     s'empilaient ; elles défilent maintenant du doigt, comme partout
     ailleurs sur un téléphone. */
  .fb-barre {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 8px 10px;
    gap: 6px;
    /* Elle reste sous la main pendant qu'on écrit : sans cela il faut
       remonter chercher le gras à chaque fois. */
    position: sticky;
    top: 0;
    z-index: 12;
  }
  .fb-barre::-webkit-scrollbar { height: 0; }
  .fb-barre .fb-outil { flex: 0 0 auto; white-space: nowrap; }
  .fb-sep { flex: 0 0 auto; }

  /* ── La pleine page doit se voir sans chercher ──

     La barre défile du doigt, et le bouton était au bout : il fallait
     pousser quinze commandes pour le trouver. Sur un téléphone, c'est
     pourtant le premier geste — celui qui rend la feuille lisible.

     Essayé d'abord en `sticky` à l'intérieur de la barre : ça ne tient
     pas, parce qu'un axe de la barre est masqué (`overflow-y: hidden`)
     et que `sticky` cesse alors d'accrocher. On le sort donc du
     défilement : il se pose sur le coin de la surface, hors de la
     bande, et ne bouge plus du tout. */
  /* La barre garde sa place au bouton : sans cela il couvrirait la
     dernière commande, qu'on ne pourrait plus atteindre. */
  .fb-barre { padding-right: 118px; }

  /* Le compte quittait la file des boutons par `margin-left: auto` ;
     dans une file qui défile, il partait à des kilomètres. */
  .fb-etat { margin-left: 0; flex: 0 0 auto; }

  /* La sélection des caractères ne doit pas manger la barre. */
  .fb-police { flex: 0 0 auto; }
  .fb-police select { max-width: 11rem; }

  /* ── Les réglages repassent sur une colonne ──

     Les six choix tiennent en deux colonnes jusqu'à 900 px. À 375, une
     colonne fait 150 pixels : le châpo était un timbre à trois lignes
     avec sa propre barre de défilement, et « Culture & société »
     dépassait de son menu. Un champ trop étroit pour son contenu ne
     fait pas gagner de la place — il la fait perdre en illisibilité. */
  .fb-choix { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fb-choix textarea { min-height: 5.5em; }

  /* ── La feuille ──

     Elle cesse d'être une page à l'échelle : à 148 mm réduits dans 295
     pixels, on écrivait en corps 6. Elle prend la largeur de l'écran,
     garde la typographie du livre, et le format se regarde dans
     « Les pages » — dont c'est le rôle.

     Les marges du livre deviennent une marge d'écran : garder 19 mm
     de blanc de chaque côté sur 375 pixels ne laisserait plus rien
     au texte. */
  .fb-ecrire .fb-page {
    width: 100%;
    min-height: 55vh;
    padding: 18px 16px 22px;
    text-align: left;
  }

  /* ── Les feuilles, sur un téléphone ──

     Une page A5 réduite à la largeur d'un téléphone tombe à 53 % : on
     écrirait en corps 6. On ne réduit donc pas — on garde les
     PROPORTIONS. La feuille prend la largeur de l'écran et reste deux
     fois plus haute que large si le format l'est ; ses marges suivent
     la même échelle. Le texte, lui, garde sa taille lisible.

     Une feuille de téléphone porte donc moins de lignes qu'une vraie
     page, et le compte affiché le dit. Les vraies coupures sont dans
     « Les pages ». */
  .fb-pile { zoom: 1; width: 100%; }

  /* Les marges suivent l'échelle que le script vient de calculer. */
  .fb-ecrire .fb-page {
    background: transparent;
    box-shadow: none;
    padding: calc(var(--mt) * var(--echelle, 1))
             calc(var(--me) * var(--echelle, 1))
             0
             calc(var(--mi) * var(--echelle, 1));
    text-align: justify;
  }

  .fa-feuille { min-height: 55vh; }

  /* ── Le tiroir de la bibliothèque ──
     Des cases de 132 px sur un écran de 375, cela fait deux colonnes et
     une bande blanche. */
  .fb-biblio-corps { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  [data-biblio-rayon="fonds"] { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  [data-biblio-rayon="fonds"] .fb-objet-vue { max-height: 138px; }
  .fb-biblio-onglets { flex-wrap: wrap; }
  .fb-biblio-note { margin-left: 0; width: 100%; }
}

/* ================================================================
   Écrire en pleine page
   ================================================================

   Le panneau d'écriture prend l'écran entier : la barre en haut, la
   feuille dessous, et rien d'autre. Sur un téléphone c'est la
   différence entre un tiers d'écran et tout l'écran ; sur un
   ordinateur, c'est le calme.

   `position: fixed` seul ne suffit pas : la page continuerait de
   défiler derrière, et le doigt qui touche le bord ferait glisser un
   site invisible. On bloque donc le document. */

html.a-pleine-page,
html.a-pleine-page body { overflow: hidden; }

/* L'en-tête du site est collé en haut et passait PAR-DESSUS la feuille :
   on écrivait sous le logo. En pleine page, il n'y a plus de site —
   seulement le texte. */
html.a-pleine-page .site-header,
html.a-pleine-page .masthead,
html.a-pleine-page .site-footer { display: none; }

.fb-ecrire.est-pleine-page,
.fa-ecrire.est-pleine-page {
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  padding: 0;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* La barre reste en haut, la feuille prend le reste et défile seule. */
.est-pleine-page .fb-barre {
  position: static;
  border-radius: 0;
  border-bottom: 1px solid var(--rose-pale);
  flex: 0 0 auto;
}

.est-pleine-page .fb-page,
.est-pleine-page .fa-feuille {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  width: 100%;
  max-width: 46rem;
  align-self: center;
}

/* Le tiroir de la bibliothèque s'ouvre dans le même cadre : sans
   hauteur bornée il pousserait la feuille hors de l'écran. */
.est-pleine-page .fb-biblio { flex: 0 0 auto; max-height: 46vh; overflow-y: auto; }

/* ── Où se tient le bouton ──

   Sur le coin de la surface, et non dans la barre. La barre défile du
   doigt sur un téléphone : le bouton était au bout, il fallait pousser
   quinze commandes pour le trouver. Or c'est le premier geste qu'on
   fait sur un petit écran — celui qui rend la feuille lisible.

   Essayé en `sticky` dans la barre : ça ne tient pas. Un axe de la
   barre est masqué, ce qui désarme `sticky` ; et la barre étant
   elle-même collée, elle sert de repère à ce qu'elle contient, si bien
   qu'un enfant absolu partait avec elle. Il fallait le sortir de la
   barre, pas seulement le repositionner. */
.fb-ecrire { position: relative; }

.fb-plein {
  position: absolute;
  top: 9px;
  right: 12px;
  z-index: 5;
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
  box-shadow: 0 2px 8px rgba(20, 17, 14, .18);
}
.fb-plein:hover { background: var(--rose-dark); border-color: var(--rose-dark); color: #fff; }

/* Le bouton dit ce qu'il fait, et l'on voit qu'il est enclenché. */
.fb-plein[aria-pressed="true"] {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}

/* ── La sortie doit toujours être visible ──
   Sur un téléphone la barre défile du doigt : « Fermer » se trouvait
   au bout, hors de l'écran. On entrait en pleine page sans voir par où
   en sortir — il restait la touche Échap, qu'un téléphone n'a pas. */
.est-pleine-page .fb-plein {
  position: fixed;
  top: 9px;
  right: 12px;
  z-index: 70;
  box-shadow: 0 2px 10px rgba(20, 17, 14, .22);
}

/* ── Une page à la fois ──
   Sur un téléphone, `fabrique-publique.js` prend UNE page pour étalon
   au lieu d'une double page. Les deux feuilles d'une planche doivent
   alors se poser l'une sous l'autre : côte à côte, la seconde sort de
   l'écran, et l'on croit le livre à moitié vide. */
.est-etroit .planche {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: none;
}
.est-etroit .planche .feuille { box-shadow: 0 4px 20px rgba(20, 17, 14, .22); }
.est-etroit .planche.est-seule { margin-left: 0; }
.est-etroit .planche .feuille.est-paire { border-right: 0; }

/* ================================================================
   La bibliothèque de la maison, dans les ateliers publics
   ================================================================

   Le même tiroir que celui de l'atelier de l'éditrice, aux couleurs
   d'ici. Il s'ouvre SOUS la barre et non par-dessus le texte : un
   panneau flottant cache ce qu'on est en train d'écrire, et l'on
   choisit un objet pour un endroit qu'on ne voit plus. */

.fb-biblio {
  margin: 8px 0 0;
  border: 1px solid var(--rose-pale);
  border-radius: 10px;
  background: var(--rose-tint);
  overflow: hidden;
}

/* Les deux fonds : les volets déjà dessinés d'abord, parce que ce
   sont eux qu'on vient chercher ; les objets ensuite. */
.fb-biblio-onglets {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rose-pale);
}

.fb-biblio-onglets button {
  border: 0;
  background: transparent;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .82rem;
  color: var(--rose-dark);
  cursor: pointer;
}
.fb-biblio-onglets button.est-choisi {
  background: var(--rose);
  color: #fff;
  font-weight: 600;
}

.fb-biblio-note {
  margin-left: auto;
  padding-right: 6px;
  font-size: .76rem;
  color: var(--rose-dark);
  opacity: .8;
}

.fb-biblio-vide {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  font-size: .84rem;
  color: var(--rose-dark);
}

/* `display: grid` battrait la règle du navigateur pour [hidden] :
   l'onglet caché doit le rester. */
.fb-biblio-corps[hidden] { display: none; }

/* ── Les couleurs de la maison ──
   Une forme se pose dans une couleur. Sans ce choix, elles
   arriveraient toutes rouges et l'on croirait la bibliothèque
   cassée. Les objets dessinés portent les leurs : la rangée
   disparaît sur leur rayon. */
.fb-biblio-teintes {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rose-pale);
}
.fb-biblio-teintes[hidden] { display: none; }

.fb-teinte {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--rose-pale);
  cursor: pointer;
  padding: 0;
}
.fb-teinte.est-choisie { box-shadow: 0 0 0 2px var(--rose); }
.fb-teinte:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* Une forme est découpée : elle a du transparent autour, et il faut
   le voir. Un fond est un bandeau, large et bas. Les deux tiennent
   dans la même case, chacun à sa proportion. */
.fb-objet-vue { object-fit: contain; max-height: 96px; }

/* ── Les fonds ont besoin de place ──
   Un décor de page — la guirlande, les arcades — est dessiné pour
   douze cents points de large. Réduit à une vignette de la taille
   d'une forme, ses éléments tombaient sous le point : sept décors
   donnaient sept rectangles de couleur. Leur rayon prend donc des
   cases plus grandes, et lui seul. */
[data-biblio-rayon="fonds"] { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
[data-biblio-rayon="fonds"] .fb-objet-vue { max-height: 176px; }

.fb-biblio-corps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  padding: 10px;
  max-height: 280px;
  overflow-y: auto;
}

.fb-objet {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: 6px;
  border: 1px solid var(--rose-pale);
  border-radius: 8px;
  background: #fff;
  font-size: .7rem;
  line-height: 1.25;
  color: var(--rose-dark);
  cursor: pointer;
}
.fb-objet:hover,
.fb-objet:focus-visible { border-color: var(--rose); background: var(--rose-pale); }

/* Un objet dessiné au trait blanc a besoin d'un fond sombre pour se
   voir : la vignette le porte, la case aussi. */
.fb-objet.est-clair { background: #14110e; color: #e8dfe4; border-color: #2a2420; }
.fb-objet.est-clair:hover { border-color: var(--rose); }

.fb-objet-vue { width: 100%; height: auto; display: block; border-radius: 4px; }
.fb-objet-nom { display: block; }

/* ================================================================
   Les formes des plans d'article
   ================================================================

   Les gabarits de la maison ne posent pas que des paragraphes : une
   étape de mode d'emploi, une adresse de lieu, la nomenclature d'une
   planche, la légende longue d'une photographie. Sans style, elles
   arrivaient toutes en prose — le plan posé dans l'atelier ne se
   distinguait plus d'un texte au fil.

   Les mêmes règles servent à la surface d'écriture (`.fa-feuille`) et
   à l'aperçu (`.prose`), qui est celui du vrai site : une forme qui
   se verrait à l'écriture et pas à la lecture serait un mensonge. */

/* `[hidden]` ne pose `display: none` qu'au niveau du navigateur :
   la moindre règle de `display` le bat. Le bouton « Revenir à mon
   texte » s'affichait donc toujours, y compris quand il n'y avait
   aucun texte où revenir. */
.fb-retour[hidden] { display: none; }

.fb-champ-gabarit { display: grid; gap: 6px; }
.fb-champ-gabarit .fb-retour { justify-self: start; }

.fa-feuille { counter-reset: fa-etape; }

.fa-feuille .etape,
.prose .etape {
  counter-increment: fa-etape;
  position: relative;
  padding-left: 2.6rem;
  margin: .9rem 0;
  text-indent: 0;
}
.fa-feuille .etape::before,
.prose .etape::before {
  content: counter(fa-etape);
  position: absolute;
  left: 0;
  top: .05em;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rose-pale);
  color: var(--rose-dark);
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.prose { counter-reset: fa-etape; }

/* L'adresse d'un lieu : elle se lit d'un coup d'œil, et ses lignes ne
   se coupent pas — un numéro de rue orphelin en fin de ligne oblige à
   relire. */
.fa-feuille .adresse,
.prose .adresse {
  margin: 1.1rem 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--rose);
  background: var(--rose-tint);
  font-size: .93em;
  line-height: 1.5;
  text-indent: 0;
}

/* La nomenclature d'une planche : les repères numérotés d'un schéma.
   Serrée, en petit, parce qu'elle se consulte et ne se lit pas. */
.fa-feuille .nomenclature,
.prose .nomenclature {
  margin: .25rem 0;
  padding-left: 1.1rem;
  font-size: .88em;
  line-height: 1.45;
  color: var(--texte-doux, #6b6459);
  text-indent: 0;
}

/* La légende longue : ce qu'une photographie montre, quand la légende
   d'une ligne n'y suffit pas. */
.fa-feuille .legende-longue,
.prose .legende-longue {
  margin: .4rem 0 1.4rem;
  font-size: .88em;
  line-height: 1.5;
  color: var(--texte-doux, #6b6459);
  border-bottom: 1px solid var(--rose-pale);
  padding-bottom: .7rem;
  text-indent: 0;
}

/* L'emplacement d'une image : un trou, et il doit RESSEMBLER à un trou.
   Sans cadre, on le prenait pour du texte à garder. */
.fa-feuille .illustration-vide,
.prose .illustration-vide {
  margin: 0;
  padding: 1.6rem 1rem;
  border: 2px dashed var(--rose-pale);
  border-radius: 10px;
  text-align: center;
  font-style: italic;
  font-size: .9em;
  color: var(--rose-dark);
  text-indent: 0;
}



/* ── Emporter son livre ──
   Trois sorties, presentees par leur usage. « EPUB » ne dit rien a
   qui n'en a jamais telecharge ; « pour Kindle, Kobo, Apple » le dit.
   Le format reste entre parentheses pour celui qui, lui, le cherche. */
.fb-emporter {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rose-pale);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fb-titre-groupe {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose-dark);
  margin-bottom: 4px;
}

.fb-sortie {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--rose-pale);
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.fb-sortie:hover { border-color: var(--rose); background: var(--rose-tint); }

.fs-nom {
  display: block;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.fs-nom em { font-style: normal; font-weight: 400; color: var(--ink-3); }

.fs-quoi {
  display: block;
  font-size: .78rem;
  color: var(--ink-3);
  margin-top: 2px;
}

/* L'etat du montage. Il occupe sa place meme vide : sans cela, le
   panneau sursaute a chaque clic sur « EPUB ». */
.fb-sortie-etat {
  min-height: 1.2em;
  margin: 4px 0 0;
  font-size: .82rem;
  color: var(--ink-3);
}
.fb-sortie-etat.est-attente { color: var(--rose-dark); }
.fb-sortie-etat.est-fait    { color: var(--ok); }
.fb-sortie-etat.est-rate    { color: var(--flame-dark); }

.fb-discret-mini {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-4);
  margin: 6px 0 10px;
}

.fb-vider { align-self: flex-start; }

/* ── Le feuilletage ──
   Le lecteur des mini-guides recoit ici des pages dessinees en
   millimetres au lieu d'images. Le `zoom` les reduit jusqu'a ce
   qu'elles tiennent : c'est la meme page, vue de plus loin. */
.fb-feuilleter { padding: 4px 0 0; }

.fb-feuilleter .livre-page .feuille {
  zoom: var(--zoom-feuillet, 1);
  box-shadow: 0 6px 20px rgba(20, 17, 14, .16);
  background: #fff;
}

.fb-feuilleter .page-recto { padding: 9px; }

.fb-aide-feuillet {
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--ink-3);
  text-align: center;
}

/* ── Tourner une page de texte ──

   Le mini-guide soulève sa page par le coin bas droit : elle est
   découpée en cinquante carreaux qui pivotent chacun avec un retard
   calculé sur sa distance à ce coin, et la vague remonte en diagonale
   vers la reliure. C'est possible parce qu'un carreau montre un
   MORCEAU D'IMAGE, placé par `background-position`.

   Ici la page est du texte vivant, composé à l'instant. On ne peut pas
   la découper en cinquante fonds : il n'y a pas d'image à découper.

   On refait donc le geste autrement, sur la feuille entière. L'axe de
   rotation n'est pas la verticale pure : il penche de quelques degrés,
   si bien que le coin BAS parcourt plus de chemin que le haut et part
   le premier. C'est ce qui distingue une page qu'on tourne d'un volet
   qui bascule.

   ── Ce qu'il a fallu contourner ──

   `.livre-page { transform: none !important }`, six cents lignes plus
   haut, interdit à la page de bouger : le mini-guide a déplacé toute
   l'animation sur ses carreaux et immobilise la feuille exprès. Mon
   premier essai posait donc un `transform` que rien n'appliquait — la
   page en attente restait sur la pile et le livre s'ouvrait au
   chapitre 7 en croyant montrer le premier.

   On lui rend le droit de bouger, ici seulement. */

.fb-feuilleter .livre-page {
  transform-origin: left center;
  transition:
    transform .84s cubic-bezier(.33, .02, .3, 1),
    opacity .5s ease .18s;
}

/* La page de droite s'en va : elle pivote autour de la reliure, à sa
   gauche, et son coin bas décolle le premier. */
.fb-feuilleter .livre-page.est-tournee {
  transform: rotate3d(.085, 1, .02, -176deg) !important;
  opacity: 0;
}

/* Celle de gauche fait l'inverse : sa reliure est à droite, et elle
   arrive de l'autre côté. */
.fb-feuilleter .livre.est-double .livre-page[data-cote-page="gauche"] {
  transform-origin: right center;
}
.fb-feuilleter .livre.est-double .livre-page[data-cote-page="gauche"].est-en-attente {
  transform: rotate3d(.085, 1, -.02, 176deg) !important;
  opacity: 0;
}

/* Une page partie ne se laisse ni voir ni cliquer une fois posée. */
.fb-feuilleter .livre-page.est-tournee,
.fb-feuilleter .livre-page[data-cote-page="gauche"].est-en-attente {
  pointer-events: none;
}

/* L'ombre du pli : sombre près de la reliure, nulle au bord libre.
   C'est elle qui fait croire à l'épaisseur du papier. */
.fb-feuilleter .page-recto { position: relative; }
.fb-feuilleter .page-ombre {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(20, 17, 14, .13) 0,
    rgba(20, 17, 14, .04) 9%,
    rgba(20, 17, 14, 0) 22%);
}
.fb-feuilleter .livre-page[data-cote-page="gauche"] .page-ombre {
  background: linear-gradient(270deg,
    rgba(20, 17, 14, .13) 0,
    rgba(20, 17, 14, .04) 9%,
    rgba(20, 17, 14, 0) 22%);
}

/* Tout voir : les pages se posent à plat, plus rien ne pivote. */
.fb-feuilleter .livre.est-deplie .livre-page {
  transform: none !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fb-feuilleter .livre-page { transition: opacity .2s ease; }
  .fb-feuilleter .livre-page.est-tournee,
  .fb-feuilleter .livre-page[data-cote-page="gauche"].est-en-attente {
    transform: none !important;
  }
}

/* Le choix des caractères, dans la barre. Un menu et non des boutons :
   vingt et une polices en boutons feraient un second mur. */
.fb-police select {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--rose-pale);
  border-radius: 999px;
  padding: 6px 10px;
  max-width: 190px;
  cursor: pointer;
}
.fb-police select:hover { border-color: var(--rose); }

/* Les mesures : le format, puis ses quatre marges en retrait, puis ce
   que ces marges laissent au texte. Le retrait dit la dépendance —
   les marges sont une conséquence du format, pas une ligne de plus. */
.fb-mesures div.est-detail {
  padding-left: 12px;
  font-size: .84em;
  color: var(--ink-3);
}
.fb-mesures div.est-detail dt::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1px;
  background: var(--rose);
  vertical-align: middle;
  margin-right: 6px;
}
.fb-mesures dt i { font-style: normal; color: var(--ink-4); }

/* Le retour en arrière après un gabarit. Il n'apparaît que s'il y a
   un texte à rendre, et disparaît dès qu'il l'a rendu. */
.fb-retour { margin-top: 8px; }

/* ── Les autres formes de la maison, dans la surface d'écriture ──
   Elles reprennent ce que fait la page imprimée : le vers qui ne se
   justifie pas, le nom du personnage détaché, la didascalie en retrait,
   la signature à droite. Sans elles, un poème et une scène s'écrivaient
   en prose justifiée avec des alinéas — et l'on ne voyait pas ce qu'on
   était en train de composer. */
.fb-ecrire .fb-page p.sans-alinea { text-indent: 0; }
.fb-ecrire .fb-page p.vers {
  text-align: left; text-indent: 0; margin: 0; hyphens: none;
}
.fb-ecrire .fb-page p.personnage {
  text-indent: 0; text-align: left;
  font-variant-caps: small-caps; letter-spacing: .06em;
  margin: 1em 0 0;
}
.fb-ecrire .fb-page p.didascalie {
  text-indent: 0; text-align: left; font-style: italic;
  color: var(--ink-3); margin-left: 6%;
}
.fb-ecrire .fb-page p.personnage + p,
.fb-ecrire .fb-page p.didascalie + p { text-indent: 0; }
.fb-ecrire .fb-page p.signature {
  text-align: right; font-style: italic; text-indent: 0; margin-top: 1em;
}

/* ── Tourner par le coin ──

   On ne tourne pas une page en poussant son milieu : on la prend par
   le bas, du côté opposé à la reliure, et on la soulève. Le lecteur du
   mini-guide offre deux bandes sur toute la hauteur — juste pour un
   dépliant qu'on fait défiler, faux pour un livre.

   Ces deux coins remplacent les bandes dans la fabrique. Ils portent
   `data-cote`, que `livre.js` écoute déjà : rien à ajouter côté
   script.

   La corne se voit un peu au repos et se lève au survol. Une zone
   cliquable entièrement invisible ne s'essaie jamais — et une page
   qu'on ne sait pas tourner passe pour une image. */

/* Les coins se placent par rapport au LIVRE : sans cette ligne, ils
   remontaient jusqu'au premier ancêtre positionné — il n'y en avait
   aucun — et se calaient donc sur la page entière, quelque part au
   milieu de l'écran. */
.fb-feuilleter .livre { position: relative; }

.fb-feuilleter .fb-coin {
  position: absolute;
  bottom: 0;
  /* Assez grand pour la main, assez petit pour ne pas couvrir le
     texte : un quart de la largeur d'une page, un cinquième de sa
     hauteur. */
  width: 22%;
  min-width: 90px;
  height: 26%;
  min-height: 90px;
  top: auto;
  z-index: 320;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}
.fb-feuilleter .fb-coin-gauche { left: 0; right: auto; }
.fb-feuilleter .fb-coin-droit { right: 0; left: auto; }
.fb-feuilleter .fb-coin:disabled { cursor: default; }

/* La corne de papier : un triangle qui se soulève depuis le coin. */
.fb-corne {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  transition: border-width .18s ease, filter .18s ease;
  filter: drop-shadow(-2px -2px 4px rgba(20, 17, 14, .18));
}
.fb-coin-droit .fb-corne {
  right: 0;
  border-width: 0 0 26px 26px;
  border-color: transparent transparent var(--bg-3) transparent;
}
.fb-coin-gauche .fb-corne {
  left: 0;
  border-width: 0 26px 26px 0;
  border-color: transparent transparent var(--bg-3) transparent;
}

.fb-coin:hover:not(:disabled) .fb-corne,
.fb-coin:focus-visible:not(:disabled) .fb-corne {
  filter: drop-shadow(-3px -3px 7px rgba(20, 17, 14, .3));
}
.fb-coin-droit:hover:not(:disabled) .fb-corne,
.fb-coin-droit:focus-visible:not(:disabled) .fb-corne {
  border-width: 0 0 54px 54px;
}
.fb-coin-gauche:hover:not(:disabled) .fb-corne,
.fb-coin-gauche:focus-visible:not(:disabled) .fb-corne {
  border-width: 0 54px 54px 0;
}

/* Une corne qui ne mène nulle part ne se montre pas. */
.fb-coin:disabled .fb-corne { opacity: 0; }

.fb-coin:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .fb-corne { transition: none; }
}

/* ── Le plan du livre, dans la colonne ──
   Il se refait à chaque « Chapitre » posé. Les lignes sont des boutons :
   on y clique pour aller écrire dedans, et cela doit se voir. */
.fb-plan {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rose-pale);
}

.fb-plan-liste { display: flex; flex-direction: column; gap: 2px; }

.fb-plan-ligne {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "nb nom page" ".  signes signes";
  align-items: baseline;
  gap: 0 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 7px 8px;
  cursor: pointer;
  transition: background .12s;
}
.fb-plan-ligne:hover { background: var(--rose-tint); }

/* ── Les pages d'un chapitre ──
   Sous chaque titre, ses pages. C'est la question qu'on se pose en
   écrivant : où en suis-je, et combien ce chapitre fait-il de pages. */
.fpl-bloc { border-bottom: 1px solid var(--line); }
.fpl-bloc:last-child { border-bottom: 0; }

.fpl-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 12px 10px 40px;
}

.fpl-page-b {
  min-width: 26px;
  padding: 3px 7px;
  border: 1px solid var(--rose-pale);
  border-radius: 6px;
  background: #fff;
  color: var(--rose-dark);
  font: inherit;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.fpl-page-b:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.fpl-page-b:focus-visible { outline: 2px solid var(--rose); outline-offset: 1px; }

/* Au-delà de douze pages, on ne les montre plus une à une : quarante
   pastilles ne se lisent pas, elles noient le plan. */
.fpl-beaucoup { font-size: .74rem; color: var(--ink-3); }

/* ── Le chapitre ouvert ──
   La surface n'en porte qu'un : il faut voir lequel, sinon on écrit
   sans savoir où. */
.fpl-bloc.est-ouvert { background: var(--rose-tint); }
.fpl-bloc.est-ouvert .fpl-nom { font-weight: 600; color: var(--rose-dark); }

/* La page qu'on regarde, parmi celles du chapitre. */
.fpl-page-b.est-vue {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}

.fb-plan-ligne:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }

.fpl-nb {
  grid-area: nb;
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--rose-dark);
  font-variant-numeric: tabular-nums;
}
.fpl-nom {
  grid-area: nom;
  font-size: .88rem;
  color: var(--ink);
  /* Un titre long ne pousse pas la colonne : il se coupe. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fpl-page {
  grid-area: page;
  font-size: .76rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.fpl-signes {
  grid-area: signes;
  font-size: .72rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ── Les ajustements, repliés ──
   Le gabarit décide ; ceci le corrige. Un bloc qu'on ouvre quand on en
   a besoin, et qui ne dispute pas la décision principale. */
.fb-ajuster {
  margin-top: 12px;
  border-top: 1px solid var(--line-2);
  padding-top: 10px;
}
.fb-ajuster > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  list-style: none;
  padding: 4px 0;
}
.fb-ajuster > summary::-webkit-details-marker { display: none; }
.fb-ajuster > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 7px;
  color: var(--rose-dark);
  transition: transform .14s;
}
.fb-ajuster[open] > summary::before { transform: rotate(90deg); }
.fb-ajuster > summary:hover { color: var(--ink); }
.fb-ajuster > summary:focus-visible {
  outline: 2px solid var(--rose); outline-offset: 2px; border-radius: 3px;
}
.fb-ajuster[open] > summary { margin-bottom: 10px; }

/* En une colonne, les six champs passaient en deux colonnes. Il n'en
   reste que trois visibles, et ils se lisent mieux l'un sous l'autre. */
@media (max-width: 860px) {
  /* En une colonne, les ajustements ont quitte le bloc des choix : ils
     sont un element de la grille a part. On les remonte avec eux —
     c'est un réglage, pas une lecture — mais repliés, ils ne coûtent
     qu'une ligne avant la feuille. */
  .fb-ajuster {
    order: -1;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 10px 16px;
    margin-top: 0;
  }
}

/* ── L'illustration, dans la surface d'écriture ──
   Elle prend la largeur du bloc de texte, comme sur la page imprimée,
   et sa légende se lit en dessous. On la voit à sa vraie place avant
   même d'aller regarder les pages. */
.fb-ecrire .fb-page figure.illustration {
  margin: 1.2em 0;
  text-indent: 0;
}
.fb-ecrire .fb-page figure.illustration img {
  display: block;
  width: 100%;
  height: auto;
}
.fb-ecrire .fb-page figure.illustration figcaption {
  font-size: .82em;
  line-height: 1.4;
  color: var(--ink-3);
  text-align: left;
  text-indent: 0;
  margin-top: .4em;
  hyphens: none;
}

/* ── La barre de l'illustration ──
   Elle vit SUR l'image, apparaît quand on la choisit, disparaît dès
   qu'on écrit ailleurs. Ce sont des gestes d'objet — déplacer,
   redimensionner, légender — et ils n'ont rien à faire dans la barre du
   texte. */
/* La barre se place dans le panneau, pas dans la feuille : c'est lui
   qui lui sert de repère. */
.fb-ecrire { position: relative; }

.fb-ecrire .fb-page figure.illustration.est-choisie {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

.fb-barre-image {
  position: absolute;
  /* `top` et `left` sont posés par le script, sur la place de l'image
     dans le panneau. Le décalage remonte la barre au-dessus d'elle. */
  transform: translate(-50%, calc(-100% - 10px));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 7px;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(20, 17, 14, .3);
  white-space: nowrap;
  /* Elle ne se compose pas : c'est une commande, pas du texte. */
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  text-indent: 0;
  font-style: normal;
}
.fb-barre-image button {
  background: transparent;
  border: 0;
  color: #f3efe8;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.fb-barre-image button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.fb-barre-image button:disabled { opacity: .3; cursor: default; }
.fbi-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .22); margin: 0 3px; }
.fbi-taille {
  color: #a49b8e;
  font-size: 11px;
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Les quatre largeurs, comme sur la page imprimée. */
.fb-ecrire .fb-page figure.illustration img { width: 100%; }
.fb-ecrire .fb-page figure.illustration.ill-75 img { width: 75%; margin: 0 auto; }
.fb-ecrire .fb-page figure.illustration.ill-50 img { width: 50%; margin: 0 auto; }
.fb-ecrire .fb-page figure.illustration.ill-33 img { width: 33%; margin: 0 auto; }

/* Une légende vide se signale, sinon on ne sait pas où écrire. */
.fb-ecrire .fb-page figcaption:empty::before {
  content: "La légende…";
  color: var(--ink-4);
}

/* ── L'appel à manuscrits, en plusieurs paragraphes ──
   Il n'en portait qu'un : rien ne séparait les blocs, et les cinq
   paragraphes du texte arrivaient collés en un pavé. Les blancs que
   l'éditrice a mis dans son texte doivent se voir.

   La première phrase est une question posée au lecteur — c'est
   l'accroche. Elle se lit un cran plus grand, et le reste suit. */
.appel-texte p {
  margin: 0 0 .85em;
  max-width: 62ch;
}
.appel-texte p:last-child { margin-bottom: 0; }
.appel-texte p:first-of-type {
  font-size: 1.12em;
  margin-bottom: 1em;
}

/* Sur la bande de l'accueil, le texte est long : la colonne de droite
   ne doit pas rester suspendue en haut. */
.appel-manuscrits .appel-inner { align-items: center; }

/* ── L'atelier d'articles ──
   Le pendant de la fabrique de livres. Il en reprend le rail, la barre
   et l'illustration ; ce qui change, c'est ce qu'on compose : pas une
   page de papier, mais une page de ce site. */

.fb-passerelle {
  margin: 10px 0 0;
  font-size: .86rem;
  color: var(--ink-3);
}
.fb-passerelle a { color: var(--flame); }

/* La surface d'écriture d'un article n'a ni marges ni format : elle a
   la largeur de lecture du site, et ses caractères. */
.fa-ecrire { background: var(--bg-3); border-radius: 8px; padding: 22px 0 26px; }

.fa-feuille {
  width: min(100%, 42rem);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 34px 38px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 18px rgba(20, 17, 14, .14);
  outline: none;
  font-family: var(--serif);
  font-size: 1.11rem;
  line-height: 1.78;
  color: var(--ink-2);
}
.fa-feuille:focus-visible { box-shadow: 0 3px 18px rgba(20,17,14,.14), 0 0 0 2px var(--rose); }
.fa-feuille p { margin: 0 0 1.2em; }
.fa-feuille h2 {
  font-family: var(--sans); font-size: 1.45rem; letter-spacing: -.02em;
  margin: 1.8em 0 .5em; color: var(--ink);
}
.fa-feuille h3 { font-family: var(--sans); font-size: 1.2rem; margin: 1.7em 0 .5em; color: var(--ink); }
.fa-feuille ul, .fa-feuille ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.fa-feuille blockquote {
  margin: 1.4em 0; padding-left: 1.1em;
  border-left: 3px solid var(--rose-pale);
  font-style: italic; color: var(--ink-3);
}
.fa-feuille figure.illustration { margin: 1.6em 0; }
.fa-feuille figure.illustration img { display: block; width: 100%; height: auto; }
.fa-feuille figure.illustration.ill-75 img { width: 75%; margin: 0 auto; }
.fa-feuille figure.illustration.ill-50 img { width: 50%; margin: 0 auto; }
.fa-feuille figure.illustration.ill-33 img { width: 33%; margin: 0 auto; }
.fa-feuille figcaption {
  font-family: var(--sans); font-size: .84rem; color: var(--ink-3);
  margin-top: .5em; line-height: 1.45;
}
.fa-feuille figcaption:empty::before { content: "La légende…"; color: var(--ink-4); }

/* La barre de l'image se place dans le panneau, comme dans la fabrique. */
.fa-ecrire { position: relative; }

/* L'aperçu : la vraie mise en pages du site, posée sur une feuille. */
.fa-apercu {
  background: var(--bg-3);
  border-radius: 8px;
  padding: 26px 0 34px;
}
.fa-vue {
  width: min(100%, 46rem);
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  padding: 40px 42px;
  box-shadow: 0 3px 18px rgba(20, 17, 14, .14);
}
.fa-vue .article-head { margin-bottom: 26px; }
.fa-vue h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 10px 0 12px; }
.fa-vue .article-lead:empty { display: none; }
.fa-vue .tag:empty { display: none; }

@media print {
  .fa-ecrire, .fb-onglets, .fb-barre, .fb-reglages, .fb-tete,
  .fb-passerelle { display: none !important; }
  .fa-apercu, .fa-apercu[hidden] {
    display: block !important; background: none; padding: 0;
  }
  .fa-vue { box-shadow: none; padding: 0; width: 100%; }
}

/* Le chapô est un champ comme les autres : sans cette ligne, un
   `textarea` prend la police à chasse fixe du navigateur, et le
   formulaire se met à parler deux langues. */
.fb-champ textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink);
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  resize: vertical;
}
.fb-champ textarea:focus-visible { outline: 2px solid var(--rose); outline-offset: -1px; }

/* ── `hidden` ne gagne pas contre un `display` ──

   L'attribut `hidden` pose `display: none` depuis la feuille du
   navigateur : la moindre règle de la maison qui donne un `display`
   passe devant, et l'élément reste visible alors que le script le
   croit caché.

   `.fb-barre` est en `display: flex` : la ranger sur l'onglet
   « Aperçu » ne faisait rien du tout. C'est le même piège qui vidait
   le PDF, où un panneau d'onglet fermé ne s'imprimait pas.

   On le dit une fois, pour les blocs de l'atelier qui se rangent.
   Et cette regle est bornee a l'ECRAN. Sans cela elle passerait devant
   celle qui rouvre le panneau des pages pour l'impression — le PDF
   ressortirait blanc, exactement comme avant. Une correction qui
   defait la precedente est la faute la plus facile a faire. */
@media screen {
  .fb-barre[hidden],
  .fb-plan[hidden],
  .fb-ecrire[hidden],
  .fb-pages[hidden],
  .fb-feuilleter[hidden],
  .fa-ecrire[hidden],
  .fa-apercu[hidden] { display: none !important; }
}

/* Le second bouton de la bande rose : le même poids que le premier,
   sans la même insistance. Deux ateliers, deux portes — et aucune des
   deux ne doit ressembler à une note de bas de page. */
/* `btn-contour-blanc` est retiré : la seule bande qui l'employait —
   la fabrique en tête d'accueil — n'est plus fuchsia, et un bouton
   blanc sur du papier rose ne se voyait plus. Vérifié : aucune vue ne
   pose plus cette classe. Elle est remplacée par `btn-contour-rose`. */
.fabrique-appel .fabrique-note { display: block; margin-top: 14px; }

/* ── De la lecture à l'écriture ──
   Au bas de la liste des articles : qui vient d'en lire dix est la
   personne qui pourrait en écrire un. */
.ecrire-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}
.ecrire-surtitre {
  display: block;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-dark);
  margin-bottom: 10px;
}
.ecrire-mots h2 { margin: 0 0 12px; }
.ecrire-mots p { margin: 0; max-width: 56ch; color: var(--ink-2); }
.ecrire-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ecrire-note { font-size: .8rem; color: var(--ink-3); max-width: 30ch; }

@media (max-width: 860px) {
  .ecrire-inner { grid-template-columns: 1fr; gap: 22px; }
}