@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=JetBrains+Mono:wght@400;600&family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap');
:root{--paper:#f5f1e8;--ink:#1e2227;--red:#9c3d2e;--tuf:#d9b45a;--cream:#fffdf7;--line:#c9c1b3;--mono:'JetBrains Mono',monospace;--display:'Bricolage Grotesque',sans-serif;--serif:'Newsreader',Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.5;padding-top:42px}.independence{position:fixed;inset:0 0 auto;z-index:20;background:var(--red);color:#fff8ef;text-align:center;padding:10px 18px;font:600 11px/1.3 var(--mono);letter-spacing:.02em}.wrap{max-width:1240px;margin:auto;padding:0 30px}.nav{display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid var(--ink)}.brand{font:800 31px/1 var(--display);text-decoration:none;color:var(--ink);letter-spacing:-.07em}.brand i{font-family:var(--serif);font-weight:400;color:var(--red)}.navlinks{display:flex;gap:20px;flex-wrap:wrap}.nav a{color:inherit;font:600 12px var(--mono);text-decoration:none}.nav a:hover,.nav a:focus-visible{color:var(--red);text-decoration:underline}.kicker,.meta,.tag,.stamp{font:600 11px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase}.kicker{color:var(--red)}h1,h2,h3{font-family:var(--display);line-height:.98;letter-spacing:-.045em}h1{font-size:clamp(3.2rem,8vw,7.5rem);margin:.18em 0}h2{font-size:clamp(2rem,4vw,3.8rem);margin:1.2em 0 .35em}h3{font-size:1.45rem;margin:1.4em 0 .3em}a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}a:focus-visible{outline:3px solid var(--tuf);outline-offset:3px}.hero{padding:28px 0 64px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:end}.hero-image{min-height:550px;position:relative;overflow:hidden;background:var(--ink)}.hero-image img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:grayscale(.25) contrast(1.05)}.hero-image figcaption{position:absolute;bottom:16px;left:16px;background:var(--paper);padding:7px 9px;font:10px var(--mono)}.hero-copy{padding:0 0 28px}.lede{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.28;max-width:33ch}.rule{border:0;border-top:1px solid var(--ink);margin:0}.button{display:inline-block;background:var(--red);color:#fff;text-decoration:none;padding:14px 18px;font:600 12px var(--mono);margin-top:18px}.button:hover{background:var(--ink)}.section{padding:72px 0}.dark{background:var(--ink);color:var(--paper)}.dark a{color:var(--tuf)}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:baseline;border-top:1px solid currentColor;padding-top:12px}.mosaic{display:grid;grid-template-columns:1.35fr .8fr .8fr;gap:18px;margin-top:32px}.story{min-height:300px;display:flex;flex-direction:column;justify-content:end;padding:22px;color:var(--cream);background:var(--ink) center/cover;position:relative;isolation:isolate}.story:before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(18,18,18,.9));z-index:-1}.story:first-child{min-height:520px}.story h3{font-size:clamp(1.5rem,2.7vw,2.6rem);margin:.35em 0}.story a{color:#fff;text-decoration:none}.story a:hover{text-decoration:underline}.story .tag{color:var(--tuf)}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink);margin-top:30px}.fact{background:var(--paper);padding:22px}.fact strong{display:block;font:700 1.35rem var(--display)}.stamp{display:inline-block;background:var(--tuf);color:var(--ink);padding:6px 8px;margin-top:12px;text-transform:none;font-size:10px}.page-head{padding:58px 0 22px;border-bottom:1px solid var(--ink)}.breadcrumbs{font:11px var(--mono);margin:16px 0}.article{max-width:760px;margin:0 auto;padding:44px 0 84px}.article>figure{margin:0 -200px 44px}.article figure img{width:100%;max-height:510px;object-fit:cover;display:block}.credit{font:11px var(--mono);margin-top:7px}.article p{margin:0 0 1.1em}.article li{margin:.45em 0}.callout{border-left:6px solid var(--red);background:#ece4d5;padding:18px 22px;margin:32px 0}.source-box{border:1px solid var(--ink);padding:20px;margin:32px 0}.source-box p{margin:.4em 0}.table-wrap{overflow-x:auto;margin:28px 0}table{border-collapse:collapse;width:100%;font-size:16px}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--line);vertical-align:top}th{font-family:var(--display)}.related{margin-top:55px;border-top:1px solid var(--ink)}.related ul{padding-left:18px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.category{border-top:5px solid var(--red);padding-top:15px}.category h2{font-size:2.4rem}.newsletter{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding:58px 0}.emailbox{background:var(--tuf);padding:28px}.emailbox input{width:100%;padding:13px;border:1px solid var(--ink);background:var(--cream);font:14px var(--mono)}.emailbox button{border:0;margin-top:12px;cursor:pointer}.footer{padding:45px 0;background:var(--ink);color:var(--paper);font-size:15px}.footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer a{color:var(--tuf)}@media(max-width:800px){body{font-size:18px}.wrap{padding:0 18px}.nav{align-items:flex-start;gap:15px;flex-direction:column}.hero-grid,.newsletter{grid-template-columns:1fr}.hero-image{min-height:370px;order:-1}.mosaic,.category-grid{grid-template-columns:1fr}.story,.story:first-child{min-height:330px}.facts{grid-template-columns:1fr}.article>figure{margin:0 0 30px}.section{padding:50px 0}}

/* ------------------------------------------------------------------
   Tokens de la convention parc Slateways (posés par 02b-adapt-da, délégué).
   Le front nomme ses tokens --paper/--ink/--red/--tuf/--cream/--line ; les
   étapes en aval (05c, 06a, 06a2) et le thème du blog lisent la convention
   du parc. Ces alias exposent les MÊMES valeurs sous les deux noms : aucune
   règle existante ne change, rien n'est repeint.
   Bloc séparé et non fusionné dans le :root d'origine : celui-ci est minifié
   sur une seule ligne, et une insertion en son sein n'est pas rejouable.
   ------------------------------------------------------------------ */
:root{
  --primary-color: #9C3D2E;
  --primary: #9C3D2E;
  --primary-hover: #82321F;
  --on-primary: #FFFFFF;
  --secondary-color: #1E2227;
  --secondary: #1E2227;
  --secondary-hover: #2C3138;
  --bg: #F5F1E8;
  --surface: #FFFDF7;
  --text: #1E2227;
  --text-secondary: #4A5058;
  --text-strong: #0F1216;
  --text-muted: #5F656C;
  --text-faint: #C9C3B4;
  --fill: #EFE9DB;
  --border: #DCD4C2;
  --white: #FFFFFF;
  --callout-bg: #FBF3DC;
  --callout-text: #6B4A12;
  --callout-border: #E3CE93;
  --font-heading: 'Bricolage Grotesque',sans-serif;
  --font-body: 'Newsreader',Georgia,serif;
  --font-mono: 'JetBrains Mono',monospace;
}

/* Tableaux de saisie des strumenti (posés par 05-tools). Aucune couleur nouvelle :
   uniquement la mise en forme des champs, absente du front d'origine. */
.tool-form input,.tool-form select{width:100%;max-width:340px;padding:10px;border:1px solid var(--ink);background:var(--cream);font:15px var(--mono)}
.tool-form table caption{caption-side:top;text-align:left;padding-bottom:10px}
.tool-form th{font-weight:400;font-family:var(--serif)}
.blog-categories{padding:14px 0 4px}

/* BLOC SOUS-MENU OUTILS — posé par 05b-outils-nav (délégué).
   Sans JavaScript : le sous-menu s'ouvre au survol et au focus clavier, comme le
   reste du front, qui n'embarque aucun script. Sur petit écran il se déplie en
   permanence plutôt que de dépendre d'un survol qui n'existe pas au toucher. */
.nav-item{position:relative;display:inline-block}
.nav-item.has-sub>a{white-space:nowrap}
.sub-nav{display:none;position:absolute;left:0;top:100%;z-index:30;min-width:320px;
  background:var(--cream);border:1px solid var(--ink);padding:10px 0}
.nav-item.has-sub:hover .sub-nav,.nav-item.has-sub:focus-within .sub-nav{display:block}
.sub-nav a{display:block;padding:9px 16px;text-decoration:none;color:var(--ink);
  font:600 12px var(--mono)}
.sub-nav a small{display:block;margin-top:3px;font:400 11px/1.35 var(--serif);color:#5F656C;
  text-transform:none;letter-spacing:0}
.sub-nav a:hover,.sub-nav a:focus-visible{background:var(--paper);color:var(--red)}
.sub-nav-all{border-top:1px solid var(--line);margin-top:6px;padding-top:12px !important}
/* Colonnes du footer : cinq blocs sur une ligne, jamais quatre plus un isolé. */
.footer .wrap>div{flex:1 1 170px;min-width:0}
.footer .wrap>div:first-child{flex:1 1 260px}
@media(max-width:800px){
  .sub-nav{display:block;position:static;min-width:0;border:0;padding:4px 0 10px 12px;background:transparent}
  .sub-nav a{padding:6px 0}
}

/* ===== BLOC LARGEUR UNIFIÉE — toutes les pages à la largeur de la home ===== */
/*
 * Posé par 06a2-largeur-contenu. Les sélecteurs ci-dessous ont été RELEVÉS
 * dans les feuilles réellement chargées par le front, pas devinés : c'est la
 * correction du défaut d'origine, où une liste de classes supposées rendait
 * le bloc inerte sans que rien ne le signale.
 *
 * Largeur de référence relevée sur `.container` : la largeur de `.container`.
 *
 * `!important` est délibéré. Une contrainte peut être déclarée dans une
 * feuille chargée APRÈS celle-ci, ou plus bas dans ce même fichier par un
 * bloc appendu ultérieurement : à spécificité égale elle gagnerait, et le
 * bloc serait posé, validé, et sans effet.
 *
 * Les contrôles de formulaire, les images et les cartes sont épargnés.
 *
 * Ce qui suit la borne « relevé automatique : fin » est CONSERVÉ au rejeu :
 * c'est là que vivent les règles tranchées à la main. N'écris rien au-dessus.
 */

/* --- relevé automatique : début --- */
.wrap{max-width:none!important}   /* site.css : 1240px */
.lede{max-width:none!important}   /* site.css : 33ch */
.article{max-width:none!important}   /* site.css : 760px */
.source-list{max-width:none!important}   /* site.css : 820px */

/* Grilles à deux colonnes relevées, NON collapsées d'office : une grille de
   cartes se collapserait à tort. À trancher au brief 06a2, puis à écrire
   SOUS la borne de fin ci-dessous. */
/*   .newsletter { grid-template-columns: 1fr 1fr }  (site.css) */
/* --- relevé automatique : fin --- */

/* Règles tranchées à la main, conservées au rejeu de 06a2. */
/* Règles tranchées à la main, conservées au rejeu de 06a2. */
.content-narrow{max-width:none!important}
.content-narrow select,.content-narrow input[type=number],.content-narrow input[type=text]{max-width:520px}
.article-layout{width:min(1140px,calc(100% - 40px));margin-inline:auto}
.article-body{max-width:72ch}
.article-layout{width:min(100% - 28px,1140px)}
.breadcrumb{font:11px var(--mono);margin:16px 0}
.breadcrumb a{text-decoration-thickness:1px;text-underline-offset:3px}
.hero{max-width:none;width:100%;padding:0 0 64px}
.hero .hero-grid{display:grid;grid-template-columns:1fr;gap:0}
.hero .hero-image{grid-area:1/1;order:0;width:100%;margin:0;min-height:420px;
  aspect-ratio:21/9;z-index:1}
.hero .hero-image::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(transparent 18%,rgba(18,18,18,.86))}
.hero .hero-image img{filter:grayscale(.2) contrast(1.02)}
.hero .hero-image figcaption{top:14px;right:14px;bottom:auto;left:auto;z-index:2}
.hero .hero-copy{grid-area:1/1;position:relative;z-index:2;align-self:end;
  width:100%;max-width:1240px;margin:0 auto;padding:0 30px 48px;
  color:var(--cream)}
.hero .hero-copy .kicker{color:var(--tuf)}
.hero .hero-copy h1{color:var(--cream)}
.hero .hero-copy .lede{color:#EFE9DB;max-width:36ch}
.hero .hero-image{aspect-ratio:4/5;min-height:480px}
.hero .hero-copy{padding:0 18px 34px}
.nav .navlinks{align-items:center}
.nav .nav-item{display:inline-flex;align-items:center;font:600 12px var(--mono)}
.nav .nav-item.has-sub>a{display:inline-flex;align-items:center;gap:.45em}
.nav .nav-item.has-sub>a::after{content:"";width:.4em;height:.4em;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-.14em) rotate(45deg);
  transition:transform .15s ease}
.nav .nav-item.has-sub:focus-within>a::after{transform:translateY(.06em) rotate(-135deg)}
.nav .nav-item.has-sub>a::after{transition:none}
.nav .nav-item{display:flex;align-items:flex-start;flex-direction:column}
.nav .nav-item.has-sub>a::after{display:none}

/* ===== ENVELOPPE + OUVERTURE NORMÉE (couches 1 et 2 du gabarit) ===== */
.author-card{display:flex;gap:18px;align-items:flex-start;margin:0 0 22px;padding:20px 22px;background:var(--fill);border-left:3px solid var(--primary)}
.author-card .author-avatar{flex:0 0 auto;line-height:0}
.author-card .author-img{object-fit:cover}
.author-footer .author-card .author-img{width:88px;height:88px;object-fit:cover;border-radius:var(--radius-round, 50%)}
.author-footer .author-card .author-monogram{width:88px;height:88px;font-size:30px}
.author-name{margin:0;font-family:var(--font-heading);font-size:16px;font-weight:700;line-height:1.3}
.author-name a{color:var(--text-strong)}
.author-name a:hover{color:var(--primary)}
.author-job{display:block;margin-top:3px;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-muted)}
.author-legit{margin:11px 0 0;font-size:14.5px;line-height:1.5;font-weight:600;color:var(--text-strong)}
.author-bio{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-secondary)}
.author-links{margin:10px 0 0;font-size:13px}
.author-links a{color:var(--primary);font-weight:700;border-bottom:1px solid currentColor}
.page-dates{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 22px;font-size:12px;color:var(--text-muted)}
.page-dates time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.method-note{margin:0 0 26px;padding:17px 19px;background:var(--callout-bg);border:1px solid var(--callout-border);border-left:3px solid var(--primary)}
.method-note-title{margin:0 0 6px;font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--callout-text)}
.method-note p:last-child{margin:0;font-size:14px;line-height:1.6;color:var(--callout-text)}
.opening{margin:0 0 34px}
.opening .answer{margin:0;padding:22px 24px;background:var(--secondary);color:var(--white);font-family:var(--font-heading);font-size:clamp(17px,1.9vw,20px);line-height:1.45;letter-spacing:-.2px}
.essentials{margin:0;padding:20px 24px;background:var(--surface);border:1px solid var(--border);border-top:0}
.essentials-title{margin:0 0 10px;font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted)}
.essentials ul{margin:0;padding:0;list-style:none}
.essentials li{position:relative;padding:7px 0 7px 22px;font-size:15px;line-height:1.5;color:var(--text)}
.essentials li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:2px;background:var(--primary)}
.scope{margin:0;padding:14px 24px;background:var(--fill);border:1px solid var(--border);border-top:0;font-size:13.5px;line-height:1.55;color:var(--text-secondary)}
.scope span{font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-muted);margin-right:6px}
.scope a{color:var(--secondary);font-weight:700;border-bottom:1px solid currentColor}
.scope a:hover{color:var(--primary)}
.update-log{margin:0;padding:20px 22px;border-top:2px solid var(--secondary);background:var(--fill)}
.update-log-title{margin:0 0 9px;font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted)}
.update-log ul{margin:0;padding:0;list-style:none}
.update-log li{padding:6px 0;font-size:13.5px;line-height:1.5;color:var(--text-secondary);border-bottom:1px solid var(--border)}
.update-log li:last-child{border-bottom:0}
.update-log time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--text-strong)}
@media(max-width:640px){.author-card{padding:16px}.opening .answer{padding:18px}.essentials,.scope{padding:16px 18px}}

/* Signature de tête — identité et dates sur une seule ligne. Le parcours de
   l'auteur n'est pas ici : il se lit en pied, via .author-footer. */
.author-byline{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid var(--border,#D3CEC1);font-size:13px;color:var(--text-secondary,#4A554D)}
.byline-author a{color:var(--secondary,#3A4A3F);font-weight:700;border-bottom:1px solid currentColor}
.byline-author a:hover{color:var(--primary,#A65E2E)}
.author-byline .page-dates{margin:0;gap:6px 18px}

/* Pied d'article — la carte auteur complète, détachée du corps du texte. */
.author-footer{margin:38px 0 22px;border-top:2px solid var(--secondary,#3A4A3F)}
.author-footer .author-card{margin:0}

/* Signature dans le hero d'article (blog) : le hero est un aplat sombre, la
   signature doit y passer en blanc. Sans cette règle, elle hérite des couleurs
   pensées pour un fond clair et devient illisible (contraste ~1,1:1). */
.guide-hero .author-byline,
.guide-hero .author-byline .page-dates,
.guide-hero .byline-author a,
.guide-hero .page-dates time{color:#FFFFFF}
.guide-hero .author-byline{border-bottom-color:rgba(255,255,255,.28)}

/* ===== SOURCES — liens sortants cités près de l'affirmation ===== */
.source-note a[rel~="nofollow"]{color:var(--secondary);font-weight:600;border-bottom:1px solid var(--text-faint)}
.source-note a[rel~="nofollow"]:hover{color:var(--primary);border-bottom-color:var(--primary)}
.tool-table a[rel~="nofollow"]{font-weight:600;text-decoration:none;border-bottom:1px solid var(--text-faint)}
.tool-table a[rel~="nofollow"]:hover{color:var(--primary);border-bottom-color:var(--primary)}
.source-list{list-style:none;margin:0;padding:0;max-width:820px}
.source-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.source-list li:last-child{border-bottom:0}
.source-list span{display:block;margin-top:2px;font-size:11px;color:var(--text-muted)}

/* ==================================================================
   Images (étape 07c — poses déléguées).
   Ajoutées en fin de feuille : à spécificité égale, elles gagnent sur
   les media queries antérieures.
   ================================================================== */

/* Lockup de marque. Le wordmark remplace le texte du header ; sa hauteur est
   calée sur celle de l'ancien texte (31px de .brand) pour ne pas décaler la nav. */
.brand{display:inline-flex;align-items:center;line-height:0}
.brand-logo{display:block;height:30px;width:auto}

/* Pied de page : aplat encre. Le wordmark sombre y serait invisible — on y sert
   la variante claire, dont seul l'accent argile reste coloré. */
.footer-logo{display:block;height:26px;width:auto;margin-bottom:12px}

/* Emblème de la rédaction dans le bloc auteur : le CSS prévoyait déjà
   .author-img, le gabarit ne posait aucune image. */
.author-card{display:flex;gap:18px;align-items:flex-start}
.author-card .author-img{flex:0 0 auto;width:72px;height:72px;object-fit:cover;
  border-radius:50%;border:1px solid var(--line);background:var(--cream)}

/* Figures des pages pilastro. Hauteur LIBRE et cadrage `contain` : ce sont des
   natures mortes déjà recadrées au plan, qu'un `cover` à hauteur fixe
   amputerait une seconde fois. */
.pil-figura{margin:38px 0;padding:0}
.pil-figura img{display:block;width:100%;height:auto;object-fit:contain;
  border:1px solid var(--line);background:var(--cream)}
.pil-figura--hero{margin:6px 0 40px}

@media(max-width:800px){
  .brand-logo{height:26px}
  .author-card{gap:14px}
  .author-card .author-img{width:58px;height:58px}
  .pil-figura{margin:28px 0}
}