@import url('/fonts.css');
:root{--paper:#f4ede3;--paper2:#f7f1e8;--ink:#07172b;--ink2:#34404b;--dim:#6d747a;--orange:#da5d16;--yellow:#fed238;--border:rgba(7,23,43,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;line-height:1.65}a{color:inherit}::selection{background:var(--yellow);color:#16110b}
.ti-top{position:sticky;top:0;z-index:20;height:68px;padding:0 clamp(18px,4vw,58px);display:flex;align-items:center;justify-content:space-between;background:rgba(247,241,232,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.ti-brand{font-family:'Bodoni Moda',serif;font-size:40px;font-style:italic;font-weight:800;text-decoration:none;letter-spacing:-.07em}.ti-brand b{color:var(--orange);font-style:normal}.ti-home{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}.ti-home:hover{color:var(--orange)}
.ti-hero{max-width:1180px;margin:0 auto;padding:clamp(68px,9vw,124px) clamp(20px,5vw,72px) 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.42fr);gap:48px;align-items:end}.ti-kicker{font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}.ti-num{display:block;margin-bottom:12px;color:var(--dim);font-size:10px;letter-spacing:.2em}.ti-hero h1{font-family:'Bodoni Moda',serif;font-style:italic;font-size:clamp(58px,8.5vw,122px);line-height:.82;letter-spacing:-.065em;margin:10px 0 0}.ti-hero h1 b{color:var(--orange);font-style:normal}.ti-deck{font-family:'Bodoni Moda',serif;font-size:clamp(20px,2vw,28px);line-height:1.28;color:var(--ink2);margin:0 0 8px}.ti-source{font-size:10px;color:var(--dim);margin-top:16px}
.ti-chapter-nav{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,72px) 52px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--border)}.ti-chapter-nav a{position:relative;padding:14px 8px 14px 24px;text-decoration:none;border-left:1px solid var(--border);font-size:9px;font-weight:700}.ti-chapter-nav a:before{content:attr(data-n);position:absolute;left:7px;top:16px;font-size:6px;color:var(--dim)}.ti-chapter-nav a:hover,.ti-chapter-nav a.is-active{color:var(--orange);background:rgba(255,255,255,.25)}
.ti-layout{max-width:1180px;margin:0 auto;padding:64px clamp(20px,5vw,72px) 120px;display:grid;grid-template-columns:minmax(0,760px) minmax(180px,1fr);gap:clamp(40px,7vw,110px);align-items:start}.ti-content{min-width:0}.ti-side{position:sticky;top:100px;border-top:1px solid var(--border);padding-top:16px}.ti-side span{display:block;font-size:8px;letter-spacing:.18em;color:var(--orange);font-weight:700}.ti-side p{font-size:12px;color:var(--dim);margin:10px 0 20px}.ti-side a{display:inline-flex;text-decoration:none;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--ink)}
.ti-content h2,.ti-content h3,.ti-content h4,.ti-content h5{scroll-margin-top:92px;color:var(--ink);font-family:'Bodoni Moda',serif;letter-spacing:-.035em}.ti-content h2{font-size:clamp(34px,4.5vw,56px);line-height:1;margin:74px 0 24px;border-top:1px solid var(--border);padding-top:34px}.ti-content h3{font-size:30px;line-height:1.1;margin:52px 0 18px}.ti-content h4{font-size:23px;margin:38px 0 14px}.ti-content h5{font-size:19px;margin:30px 0 12px}.ti-paragraph{font-size:15px;color:var(--ink2);margin:0 0 18px}.ti-list{position:relative;font-size:14px;color:var(--ink2);margin:0 0 8px;padding-left:21px}.ti-list>span{position:absolute;left:2px;color:var(--orange);font-weight:700}.ti-note{border-left:3px solid var(--orange);padding:14px 16px;background:rgba(255,255,255,.28);color:var(--ink)}
.ti-table-wrap{overflow-x:auto;margin:28px 0 40px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}table{width:100%;border-collapse:collapse;min-width:540px}th,td{text-align:left;vertical-align:top;padding:12px 13px;border-bottom:1px solid var(--border);font-size:12px;line-height:1.5}th{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);background:rgba(255,255,255,.2)}
.ti-figure{margin:36px 0}.ti-figure img{display:block;max-width:100%;max-height:760px;width:auto;height:auto;margin:0 auto;object-fit:contain}.ti-pager{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,72px) 90px;display:grid;grid-template-columns:1fr 1fr}.ti-pager a{background:transparent;padding:24px 24px 26px;text-decoration:none;display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--border)}.ti-pager a+a{border-left:1px solid var(--border)}.ti-pager a:last-child{text-align:right}.ti-pager small{font-size:8px;letter-spacing:.16em;color:var(--orange);font-weight:700}.ti-pager strong{font-family:'Bodoni Moda',serif;font-size:23px}.ti-footer{padding:34px 20px 48px;text-align:center;font-size:9px;color:var(--dim);letter-spacing:.12em}
.ti-index{max-width:1180px;margin:0 auto;padding:72px clamp(20px,5vw,72px) 110px}.ti-index h1{font-family:'Bodoni Moda',serif;font-style:italic;font-size:clamp(64px,9vw,126px);line-height:.82;letter-spacing:-.07em;margin:0}.ti-index h1 b{color:var(--orange);font-style:normal}.ti-index>p{max-width:700px;color:var(--ink2);font-size:16px;margin:28px 0 58px}.ti-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border)}.ti-index-card{padding:28px;text-decoration:none;border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-height:210px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s background,.2s color}.ti-index-card:hover{background:var(--ink);color:var(--paper2)}.ti-index-card i{font-style:normal;color:var(--orange);font-size:9px;letter-spacing:.15em}.ti-index-card h2{font-family:'Bodoni Moda',serif;font-size:38px;line-height:1;margin:12px 0}.ti-index-card p{font-size:12px;color:var(--dim);margin:0;max-width:42ch}.ti-index-card:hover p{color:rgba(247,241,232,.68)}
@media(max-width:820px){.ti-hero{grid-template-columns:1fr;gap:24px}.ti-chapter-nav{grid-template-columns:repeat(4,1fr)}.ti-layout{grid-template-columns:1fr}.ti-side{position:static;order:-1}.ti-index-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ti-top{height:62px}.ti-brand{font-size:34px}.ti-hero{padding-top:50px}.ti-hero h1{font-size:clamp(48px,17vw,78px)}.ti-chapter-nav{grid-template-columns:1fr 1fr;padding-bottom:34px}.ti-layout{padding-top:38px}.ti-content h2{font-size:36px}.ti-content h3{font-size:27px}.ti-paragraph{font-size:14px}.ti-index-grid{grid-template-columns:1fr}.ti-pager{grid-template-columns:1fr}.ti-pager a:last-child{text-align:left}}
/* Encadrés du manuscrit (À RETENIR, LE CONSEIL DU TORRÉFACTEUR).
   Aujourd'hui le générateur les sort en tableau d'une cellule, avec
   tout le texte dans un <th> : d'où la ligne orange en majuscules et
   le corps de texte illisible. Une fois qu'ils sortiront en
   <aside class="ti-note">, ils ressembleront à ceci. */
.ti-note{margin:30px 0 36px;border-left:3px solid var(--orange);padding:16px 18px;background:rgba(255,255,255,.28);color:var(--ink)}
.ti-note>strong{display:block;margin-bottom:9px;font:700 9px/1 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.ti-note p{margin:0 0 8px;font-size:14px;line-height:1.6}
.ti-note p:last-child{margin-bottom:0}

/* Sommaire du chapitre, dans la colonne de droite déjà sticky. */
.ti-toc{margin-top:22px;border-top:1px solid var(--border);padding-top:14px}
.ti-toc span{display:block;font:700 8px/1 'DM Sans',sans-serif;letter-spacing:.18em;color:var(--orange);margin-bottom:10px}
.ti-toc ol{list-style:none;margin:0;padding:0;counter-reset:ti}
.ti-toc li{counter-increment:ti;border-bottom:1px solid var(--border)}
.ti-toc a{display:flex;gap:9px;padding:9px 0;text-decoration:none;font-size:12px;line-height:1.35;color:var(--ink2)}
.ti-toc a:before{content:counter(ti,decimal-leading-zero);flex:0 0 18px;color:var(--orange);font-weight:700;font-size:9px;padding-top:2px}
.ti-toc a:hover{color:var(--orange)}
@media(max-width:820px){.ti-toc{margin-top:14px}.ti-toc ol{columns:2;column-gap:20px}}
/* =========================================================
   À COLLER À LA FIN DE tasse-imparfaite.css

   Deux choses ici : la correction du bloc gris du pied de page,
   et les styles des éléments que le générateur produit désormais
   (encadrés, sommaire de chapitre, index des process).
   ========================================================= */

/* ── 1. Le bloc gris sous les titres de pied de chapitre ─────
   .ti-pager portait background:var(--border) pour dessiner le
   filet de 1 px entre les deux cartes. Le fond se peignait aussi
   sous les 72 px de padding latéral et les 90 px du bas, d'où la
   dalle grise. Le filet passe sur les cartes elles-mêmes. */

.ti-pager{gap:0;background:transparent}
.ti-pager a{background:transparent;border-top:1px solid var(--border);padding:24px 24px 26px}
.ti-pager a+a{border-left:1px solid var(--border)}

/* ── 2. Encadrés du manuscrit ────────────────────────────────
   À RETENIR, LE CONSEIL DU TORRÉFACTEUR, LE POINT DE DÉPART
   COMMUN. Ils sortaient en tableau d'une cellule, tout le texte
   coincé dans un <th> orange en majuscules. */

.ti-note{margin:30px 0 36px;border-left:3px solid var(--orange);padding:16px 18px;background:rgba(255,255,255,.3)}
.ti-note>strong{display:block;margin-bottom:10px;font:700 9px/1.4 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.ti-note p{margin:0 0 9px;font-size:14px;line-height:1.62;color:var(--ink)}
.ti-note p:last-child{margin-bottom:0}

/* ── 3. Sommaire du chapitre, colonne de droite ──────────────
   La colonne .ti-side est déjà sticky : elle sert enfin. */

.ti-toc{margin-top:22px;border-top:1px solid var(--border);padding-top:14px}
.ti-toc>span{display:block;font:700 8px/1 'DM Sans',sans-serif;letter-spacing:.18em;color:var(--orange);margin-bottom:10px}
.ti-toc ol{list-style:none;margin:0;padding:0;counter-reset:ti}
.ti-toc li{counter-increment:ti;border-bottom:1px solid var(--border)}
.ti-toc a{display:flex;gap:9px;padding:9px 0;text-decoration:none;border:0;font-size:12px;line-height:1.35;color:var(--ink2);text-transform:none;letter-spacing:0;font-weight:500}
.ti-toc a:before{content:counter(ti,decimal-leading-zero);flex:0 0 18px;color:var(--orange);font-weight:700;font-size:9px;padding-top:2px}
.ti-toc a:hover{color:var(--orange)}
.ti-toc a.is-active{color:var(--orange);font-weight:700}

/* ── 4. Index des process, dans chapitre-3.html ──────────────── */

.ti-subindex{margin-top:34px}
.ti-subindex .ti-index-card{min-height:118px;padding:22px}
.ti-subindex .ti-index-card h2{font-size:26px;margin:10px 0 0}

.ti-index-heading{margin:64px 0 22px;font-family:'Bodoni Moda',serif;font-style:italic;font-size:clamp(34px,4.5vw,54px);line-height:1;letter-spacing:-.05em}
.ti-index-lead{margin:-34px 0 40px}
.ti-index-lead a{font:700 9px/1 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px}
.ti-index-lead a:hover{color:var(--orange);border-color:var(--orange)}
.ti-index-card em{display:block;margin-top:8px;font-style:normal;font:700 8px/1 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}

/* ── 5. Cellules de tableau ──────────────────────────────────── */

td>p,th>p{margin:0 0 7px;font-size:inherit;line-height:inherit}
td>p:last-child,th>p:last-child{margin-bottom:0}
td>p>span,th>p>span{color:var(--orange);font-weight:700;margin-right:5px}

@media(max-width:820px){
  .ti-toc ol{columns:2;column-gap:22px}
  .ti-toc li{break-inside:avoid}
}
@media(max-width:560px){
  .ti-toc ol{columns:1}
  .ti-subindex .ti-index-card{min-height:0}
}


/* Liens légaux communs à toutes les pages du livre */
.ti-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px}
.ti-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ti-footer a{text-decoration:none;color:var(--dim)}
.ti-footer a:hover{color:var(--orange)}