/* ==========================================================================
   home.css — lauriat.fr, accueil en monographie
   S'ajoute à assets/monograph/v1/monograph.css (copie du kit du hub,
   vincentlauriat.github.io) : n'y redéfinit rien, ne couvre que ce que le
   kit n'a pas — index des outils, planches de livres, formulaire.
   Mêmes règles que le hub : angles droits, pas d'ombre, pas de dégradé,
   cobalt seulement en aplat d'ouverture et en réponse (survol, focus).
   ========================================================================== */

/* Le contenu chinois de ce site est en simplifié : on garde l'étiquette
   zh-Hans (posée par home.js) et la pile Han correspondante, au lieu de la
   pile Hant du kit. */
html[lang="zh-Hans"] body.lang-zh,
html body.lang-zh{font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,
  "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}

/* ── Titre courant : liens de chapitre ── */
.running .nav{display:flex;gap:2px}
.running .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink-2);text-decoration:none}
.running .nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.running .here span[hidden]{display:none}
@media (max-width:960px){.running .nav{display:none}}

/* ── Page de titre ── */
.title .nm{column-gap:.28em}
.t-right .plate{max-width:420px}
.t-right .plate img{aspect-ratio:3/4;object-fit:cover;object-position:center top}
.facts dd{font-variant-numeric:tabular-nums}

/* ── Chapitres sans ouverture : l'aplat reste réservé aux quatre chapitres ── */
.chapter.quiet{padding-top:clamp(72px,11vh,132px)}
.steps li > div h3{font-size:1.25rem;letter-spacing:-.015em;line-height:1.2}
.steps li > div p{margin-top:6px;max-width:52ch}

/* ── Livres : une planche par couverture ── */
.books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px var(--col)}
.book a{display:block;text-decoration:none}
.book .pl{display:flex;justify-content:center}
.book .pl img{width:min(100%,348px)}
.book h3{margin-top:22px;font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.03em}
.book .tg{margin-top:6px;color:var(--ink-2);font-size:.9375rem}
.book .ds{margin-top:12px;max-width:44ch}
.book .go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;font-weight:600;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.book a:hover h3,.book a:hover .go{color:var(--accent-ink)}
.book a:focus-visible{outline-offset:6px}

/* ── Outils : l'index des réalisations, par famille ── */
.tgroup + .tgroup{margin-top:52px}
.tgroup > h3{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:1.25rem;
  letter-spacing:-.015em;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.tgroup > h3 .ct{font-size:.9375rem;font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tgroup ul{list-style:none}
.tool a{display:grid;grid-template-columns:2.8rem minmax(0,5fr) minmax(0,7fr);column-gap:var(--col);
  min-height:44px;padding:16px 0 18px;border-bottom:1px solid var(--rule);text-decoration:none}
.tool .n{color:var(--ink-2);font-variant-numeric:tabular-nums}
.tool .nm{font-size:1.25rem;font-weight:500;letter-spacing:-.01em;line-height:1.2;overflow-wrap:anywhere}
.tool .tg{display:block;margin-top:4px;font-size:.875rem;font-weight:400;letter-spacing:0;color:var(--ink-2)}
.tool .ds{max-width:52ch}
.tool a:hover .nm{color:var(--accent-ink)}
.tool a:focus-visible{outline-offset:-2px}

/* ── À propos ── */
.about-plate{max-width:200px;margin-bottom:28px}
.about-plate img{aspect-ratio:2/3;object-fit:cover;object-position:center top}
.about-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:22px}

/* ── Formulaire de contact : champs posés sur la planche, filet d'encre dessous ── */
#contact-form{display:grid;gap:22px;max-width:46rem}
#contact-form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--col)}
#contact-form label{display:block;margin-bottom:6px;font-size:.9375rem;color:var(--ink-2)}
#contact-form input:not([type=hidden]):not([type=checkbox]),#contact-form textarea{
  display:block;width:100%;min-height:48px;padding:12px 14px;font:inherit;color:var(--ink);
  background:var(--plate);border:0;border-bottom:1px solid var(--ink);border-radius:0;appearance:none}
#contact-form textarea{resize:vertical;min-height:9rem}
#contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#contact-form .btn{justify-self:start;font:inherit;font-weight:600;cursor:pointer}
#contact-form .btn:disabled{opacity:.6;cursor:progress}
#form-status{min-height:1.55em;font-size:.9375rem;font-weight:600}
#form-status.error{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.contact-alt{margin-top:26px;max-width:52ch}
.contact-alt a{font-weight:600;text-underline-offset:4px}
.contact-alt a:hover{color:var(--accent-ink)}

@media (max-width:960px){
  .t-right .plate{max-width:360px}
  .books{grid-template-columns:1fr;gap:48px}
  .tool a{grid-template-columns:2.4rem minmax(0,1fr)}
  .tool .ds{grid-column:2;margin-top:6px}
}
@media (max-width:600px){
  #contact-form .row{grid-template-columns:1fr}
  #contact-form .btn{width:100%;justify-content:center}
}

/* ── Familles d'outils : une ligne par famille, avec son effectif ── */
.themes{list-style:none;border-top:1px solid var(--ink)}
.theme a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:44px;padding:12px 0;
  border-bottom:1px solid var(--rule);text-decoration:none}
.theme .nm{font-size:1.25rem;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.theme .ct{color:var(--ink-2);font-size:.9375rem;font-variant-numeric:tabular-nums}
.theme a:hover .nm{color:var(--accent-ink)}
.theme a:focus-visible{outline-offset:-2px}
.tgroup.more .themes{margin-top:0;border-top:0}
.tgroup .all{margin-top:18px}
.t-right h2.side{font-size:1.125rem;letter-spacing:-.01em;margin-bottom:12px}
.tgroup{scroll-margin-top:72px}

/* Le kit élargit la colonne de gauche des pages sans planche à droite ; ici la droite porte une liste. */
.title .g12:has(.t-right .themes) .t-left{grid-column:1/6}
@media (max-width:960px){.title .g12:has(.t-right .themes) .t-left{grid-column:1/-1}}