/* ===== Blog — mise en page « la une + les branches » (12/08/2026) ==========
 *
 * Remplace l'identité précédente (fond vidéo, lavis pastel, étagère à tranches
 * de livres). Retenue par Lino après comparaison de quatre pistes dans
 * `_preview-blog.html` — piste 4 : la manchette et l'article à la une de la
 * piste 3, posés au-dessus des cartes de branche de la piste 2.
 *
 * ⚠️ PALETTE ET FONTES DU HUB, sans exception (index.html + hero.css) :
 *   --shell #fff5f0 · --ink #26393c · --muted #5d7275 · --line
 *   Poppins (marque) · Montserrat 500/600 (titres) · Geist (texte)
 *
 * ⚠️ REPÉRAGE — la demande centrale de Lino : « après les 4 carrés, on ne sait
 * pas dans quelle catégorie on est, ni pourquoi on y est. » Quatre pièces y
 * répondent et elles travaillent ENSEMBLE : `.hereto` (bandeau collant),
 * `.branche` (en-tête qui dit à quoi sert la branche), `.art-branche` (rappel
 * en tête d'article), `.suite` (la suite dans la branche). N'en retirer aucune
 * sans mesurer ce que les autres laissent tomber.
 *
 * ⚠️ `--branche` est posée EN LIGNE sur `.niveau` par blog.php, depuis
 * `blog_branches()`. Les teintes y sont mesurées sur la coquille (≥ 4,5:1) —
 * elles servent à du petit texte gras. Ne pas les changer ici.
 *
 * ⚠️ L'ancienne feuille reste dans git si besoin d'y revenir.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Montserrat:wght@500;600&family=Poppins:wght@600;700;800&display=swap');

:root {
  --shell:      #fff5f0;
  --teal:       #7bc6c9;
  --aqua:       #a5e1df;
  --coral:      #ffb199;
  --coral-deep: #ef8f6e;      /* SURFACES uniquement — 2,22:1, jamais en texte */
  --peach:      #ffcdb2;
  --teal-ink:   #2e7377;
  --ink:        #26393c;
  --muted:      #5d7275;
  --line:       rgba(38, 57, 60, 0.16);
  --line-soft:  rgba(38, 57, 60, 0.09);
  --accent:     #b0522c;      /* terre cuite — 4,79:1, la même que /realestate */
  --sans:    "Geist", -apple-system, "Helvetica Neue", sans-serif;
  --display: "Montserrat", "Geist", -apple-system, sans-serif;
  --brand:   "Poppins", "Geist", -apple-system, sans-serif;
  --brand-yellow: #eab308;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--shell);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* `blog_fix_digits()` isole les chiffres d'un titre dans un <span class="num">.
   C'était un contournement de Pixelify Sans. Avec Montserrat, changer de fonte
   pour les chiffres ferait un titre bâtard : la règle reste neutralisée.
   ⚠️ Ne pas toucher à blog_fix_digits() côté PHP — son échappement est délicat
   (bug des apostrophes du 19/07/2026). On neutralise par le CSS. */
.num { font-family: inherit; font-weight: inherit; letter-spacing: inherit; }

.wrap { width: min(1180px, 100%); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* ===================== BARRE HAUTE ===================== */
.topbar {
  position: sticky; top: 12px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  width: min(1180px, calc(100% - 28px)); margin: 12px auto 0;
  padding: 11px 20px; border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px; background: rgba(255,255,255,.55);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 12px 30px -18px rgba(38,57,60,.3);
}
.brand { font-family: var(--brand); font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.brand .sanchez { color: var(--brand-yellow); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.blog-langswitch { display: inline-flex; gap: 2px; }
.blog-lang-btn { font-size: 1rem; line-height: 1; padding: .25rem .3rem; opacity: .42;
  text-decoration: none; transition: opacity .2s; }
.blog-lang-btn:hover, .blog-lang-btn.is-active { opacity: 1; }
/* MENU DÉROULANT (Lino, 12/08/2026) — il remplace l'ancien lien de retour
   unique. Trois destinations au lieu d'une : retour au blog, retour au site
   (qui vise le HUB, pas la vidéo d'accueil) et récupérer mes vidéos.
   ⚠️ Il retire au passage le compromis « libellé OU flèche » de l'ancienne
   barre : un burger tient dans 375 px à côté des quatre drapeaux, là où le
   libellé se faisait couper au milieu d'un mot. */
.topbar-menu { position: relative; }
.topbar-burger { display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 30px; height: 30px; padding: 0 4px; border: 0; border-radius: 999px;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.topbar-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .22s, opacity .16s; }
.topbar-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.topbar-drop { position: absolute; top: calc(100% + 15px); right: 0; z-index: 40;
  display: flex; flex-direction: column; min-width: 216px; padding: 7px;
  border: 1px solid var(--line-soft); border-radius: 18px;
  /* ⚠️ OPAQUE, contrairement à la barre elle-même. Le verre translucide marche
     sur la barre parce qu'elle ne couvre que le fond de page ; le panneau, lui,
     se pose sur le fil d'Ariane et le rappel de branche, et à .86 on lisait le
     texte du dessous au travers des entrées. Mesuré à 375 px. */
  background: #fffbf9;
  box-shadow: 0 22px 44px -20px rgba(38,57,60,.5); }
/* ⚠️ Obligatoire : `display: flex` ci-dessus l'emporterait sur l'attribut
   `hidden`, et le panneau resterait ouvert au chargement. */
.topbar-drop[hidden] { display: none; }
.topbar-drop a { padding: 11px 14px; border-radius: 12px; font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; white-space: nowrap; transition: background .18s; }
.topbar-drop a:hover, .topbar-drop a:focus-visible { background: rgba(46,115,119,.12); }
@media (max-width: 620px) {
  .topbar { padding: 10px 16px; }
  .topbar-right { gap: 8px; }
  .blog-lang-btn { padding: .25rem .18rem; font-size: .92rem; }
}

/* ===================== PIÈCES COMMUNES ===================== */
.eyebrow { margin: 0; font-family: var(--brand); font-weight: 700;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.terr { display: inline-flex; align-items: center; gap: 6px; font-size: .62rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.terr::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.terr.cr { color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: .5rem 1rem;
  border-radius: 999px; text-decoration: none; border: 1px solid var(--line);
  font-size: .82rem; color: var(--muted); transition: .2s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.footer { margin-top: 80px; padding: 28px clamp(16px,4vw,40px) 64px;
  border-top: 1px solid var(--line-soft); display: flex; gap: 20px; flex-wrap: wrap;
  justify-content: center; font-size: .8rem; color: var(--muted); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* ===================== MANCHETTE + À LA UNE ===================== */
.mast { padding: clamp(38px,6vh,70px) 0 clamp(20px,3vh,30px); border-bottom: 2px solid var(--ink); }
.mast-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.mast h1 { margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem,6vw,3.6rem); letter-spacing: -.04em; line-height: .95; }
.mast .stamp { margin: 0; font-size: .68rem; color: var(--muted); letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.7; text-align: right; }

.une { display: grid; gap: clamp(22px,3.4vw,44px); margin-top: clamp(28px,4vh,44px);
  grid-template-columns: 1.15fr 1fr; align-items: center; }
@media (max-width: 900px) { .une { grid-template-columns: 1fr; } }
.une .img { aspect-ratio: 3/2; border-radius: 4px; overflow: hidden; background: var(--line-soft); }
.une .img img { width: 100%; height: 100%; object-fit: cover; }
.une .kick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.une .lab { font-size: .62rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); }
.une h2 { margin: 1rem 0 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem,3.6vw,2.35rem); letter-spacing: -.03em; line-height: 1.13; }
.une h2 a { text-decoration: none; }
.une h2 a:hover { color: var(--accent); }
.une p { margin: 1rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.65; max-width: 46ch; }
.une .meta { margin-top: 1.2rem; display: flex; align-items: center; gap: 14px;
  font-size: .74rem; color: var(--muted); flex-wrap: wrap; }

/* ===================== CHARNIÈRE + CARTES DE BRANCHE ===================== */
/* La charnière n'est pas décorative : sans elle les cartes tombent de nulle
   part juste après un article mis en avant. Et les filtres passent SOUS elle —
   au-dessus, on ne saurait pas s'ils filtrent la une ou les branches. */
.hinge { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: clamp(46px,7vh,84px);
  padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.hinge h2 { margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem,2.4vw,1.45rem); letter-spacing: -.025em; }
.hinge p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; max-width: 46ch; }

.branches { display: grid; gap: clamp(16px,2.2vw,22px); margin-top: clamp(22px,3vh,30px);
  grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .branches { grid-template-columns: 1fr; } }
.carte { background: #fff; border: 1px solid var(--line-soft); border-radius: 18px;
  padding: clamp(20px,2.6vw,28px); display: flex; flex-direction: column;
  box-shadow: 0 20px 46px -38px rgba(38,57,60,.55);
  border-top: 3px solid var(--branche, var(--ink)); }
.carte-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.carte h3 { margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem,2.3vw,1.42rem); letter-spacing: -.025em; line-height: 1.2; }
.carte .n { flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding-top: .35rem; white-space: nowrap; }
.carte .sub { margin: .7rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.carte ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line-soft); display: grid; gap: 3px; }
.carte li a { display: block; padding: 9px 10px; margin: 0 -10px; border-radius: 9px;
  text-decoration: none; font-size: .93rem; line-height: 1.45; transition: background .2s; }
.carte li a:hover { background: rgba(38,57,60,.045); }
.carte .more { margin-top: auto; padding-top: 18px; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--branche, var(--muted));
  text-decoration: none; align-self: flex-start; }

/* ===================== LE FIL ===================== */
.fil-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: clamp(46px,7vh,84px); padding-bottom: 14px;
  border-bottom: 1px solid var(--line); }
.fil-h h2 { margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem,2.4vw,1.45rem); letter-spacing: -.025em; }
.fil { list-style: none; margin: 0; padding: 0; }
.fil li { border-bottom: 1px solid var(--line-soft); }
.fil a { display: grid; gap: clamp(14px,2.4vw,30px); align-items: start;
  grid-template-columns: 92px minmax(0,1fr) 132px; padding: 26px 0; text-decoration: none; }
.fil .rail { font-size: .68rem; color: var(--muted); letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.6; padding-top: .3rem; }
.fil h3 { margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem,2.2vw,1.32rem); letter-spacing: -.022em; line-height: 1.28; }
.fil a:hover h3 { color: var(--accent); }
.fil p { margin: .55rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.6; max-width: 62ch; }
.fil .tags { margin-top: .8rem; display: flex; align-items: center; gap: 14px;
  font-size: .7rem; color: var(--muted); flex-wrap: wrap; }
.fil .th { aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; background: var(--line-soft); }
.fil .th img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
  .fil a { grid-template-columns: 1fr; gap: 10px; }
  .fil .rail { padding-top: 0; }
  .fil .th { display: none; }
}

/* ===================== REPÉRAGE ===================== */
/* ⚠️ `.niveau` BORNE le bandeau collant. Sans cette enveloppe, `position:
   sticky` prend toute la page pour terrain et le bandeau d'une branche suit
   encore le lecteur dans le pied de page. */
.niveau { position: relative; }

.hereto { position: sticky; top: 68px; z-index: 25;
  margin: 0 0 clamp(24px,3.4vh,36px);
  background: rgba(255,245,240,.88);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line); }
.hereto-in { width: min(1180px,100%); margin: 0 auto; padding: 11px clamp(16px,4vw,40px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hereto-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hereto-rail { flex: none; width: 3px; height: 20px; border-radius: 2px;
  background: var(--branche, var(--teal-ink)); }
.hereto-t { font-family: var(--display); font-weight: 600; font-size: .95rem;
  letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hereto-t a { text-decoration: none; }
.hereto-t .up { color: var(--muted); font-weight: 500; }
.hereto-t .up::after { content: " / "; opacity: .5; }
.hereto-r { flex: none; display: flex; align-items: center; gap: 14px;
  font-size: .72rem; color: var(--muted); white-space: nowrap; }
.hereto-r a { text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.hereto-r a:hover { color: var(--ink); border-bottom-color: currentColor; }
@media (max-width: 720px) { .hereto-r .opt { display: none; } }

.branche-head { border-left: 3px solid var(--branche, var(--teal-ink));
  padding: 4px 0 4px 20px; margin: 0 0 clamp(24px,3.4vh,34px); }
.branche-head .k { margin: 0; font-family: var(--brand); font-weight: 700; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--branche, var(--teal-ink)); }
.branche-head h1 { margin: .55rem 0 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem,4.4vw,2.6rem); letter-spacing: -.03em; line-height: 1.1; max-width: 20ch; }
.branche-head .why { margin: 1rem 0 0; font-size: 1.05rem; line-height: 1.6;
  color: var(--ink); max-width: 56ch; }
.branche-head .meta { margin: 1.1rem 0 0; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; font-size: .74rem; color: var(--muted); }
.branche-head .meta a { font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--branche, var(--teal-ink)); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.art-branche { display: inline-flex; align-items: center; gap: 10px;
  padding: .5rem .9rem .5rem .7rem; border-radius: 999px;
  background: rgba(38,57,60,.055); text-decoration: none; font-size: .74rem; }
.art-branche .r { width: 3px; height: 14px; border-radius: 2px; background: var(--branche, var(--teal-ink)); }
.art-branche b { font-weight: 600; color: var(--branche, var(--teal-ink)); }
.art-branche .pos { color: var(--muted); }
/* Sous 620 px la pastille passe sur deux lignes et la position se coupe en
   plein milieu. Le bandeau collant, juste au-dessus, la porte déjà. */
@media (max-width: 620px) { .art-branche .pos { display: none; } }

.suite { margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.suite > p { margin: 0 0 16px; font-family: var(--brand); font-weight: 700; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.suite-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .suite-grid { grid-template-columns: 1fr; } }
.suite-grid a { display: block; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--line-soft); background: #fff; text-decoration: none;
  transition: border-color .2s, transform .2s; }
.suite-grid a:hover { border-color: var(--branche, var(--teal-ink)); transform: translateY(-2px); }
.suite-grid .d { font-size: .66rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.suite-grid .t { display: block; margin-top: .5rem; font-family: var(--display);
  font-weight: 600; font-size: .98rem; line-height: 1.35; letter-spacing: -.015em; }

/* ===================== PAGE DE BRANCHE ===================== */
.deux { display: grid; gap: clamp(28px,4vw,56px); grid-template-columns: minmax(0,1fr) 300px;
  align-items: start; }
@media (max-width: 940px) { .deux { grid-template-columns: 1fr; } }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { border-bottom: 1px solid var(--line-soft); }
.liste a { display: grid; gap: 16px; grid-template-columns: 1fr 108px;
  align-items: center; padding: 20px 0; text-decoration: none; }
/* ⚠️ `display: block` obligatoire : ce sont des <span>, et une marge VERTICALE
   ne s'applique pas à un élément en ligne. Sans ça le titre et le résumé se
   suivaient sur la même ligne. */
.liste .t { display: block; font-family: var(--display); font-weight: 600;
  font-size: 1.06rem; line-height: 1.32; letter-spacing: -.015em; }
.liste a:hover .t { color: var(--accent); }
.liste .s { display: block; margin: .5rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.liste .m { margin: .6rem 0 0; display: flex; align-items: center; gap: 12px;
  font-size: .7rem; color: var(--muted); flex-wrap: wrap; }
.liste .th { aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--line-soft); }
.liste .th img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .liste a { grid-template-columns: 1fr; } .liste .th { display: none; } }

.aside { position: sticky; top: 130px; }
.aside-box { border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; padding: 20px; }
.aside-box + .aside-box { margin-top: 14px; }
.aside-box h3 { margin: 0; font-family: var(--brand); font-weight: 700; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.aside-box ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; }
.aside-box a { text-decoration: none; font-size: .89rem; line-height: 1.4; display: block; }
.aside-box a:hover { color: var(--branche, var(--teal-ink)); }
.aside-box li.ici { position: relative; padding-left: 14px; }
.aside-box li.ici::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; border-radius: 2px; background: var(--branche, var(--teal-ink)); }
.aside-box li.ici a { color: var(--ink); font-weight: 600; }
.aside-box .ici-lab { display: block; margin-top: 3px; font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--branche, var(--teal-ink)); }

/* ===================== ARTICLE ===================== */
.art h1 { margin: 1.1rem 0 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem,4vw,2.4rem); letter-spacing: -.03em; line-height: 1.1; }
.art .lede { margin: 1rem 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; max-width: 54ch; }
.art .byline { margin: 1.4rem 0 0; display: flex; align-items: center; gap: 14px;
  font-size: .76rem; color: var(--muted); flex-wrap: wrap; }
.blog-cover { margin: 26px 0 0; aspect-ratio: 16/9; border-radius: 14px;
  overflow: hidden; background: var(--line-soft); }
.blog-cover img { width: 100%; height: 100%; object-fit: cover; }

.blog-prose { font-size: 1.06rem; line-height: 1.75; color: #33474a; }

/* ===== LARGEUR DE LECTURE — mesurée, pas estimée =========================
 * La colonne d'article faisait 749 px, soit **95 caractères par ligne**. Au-delà
 * de 75, l'œil perd sa ligne en revenant à la marge : un article de 1 000 mots
 * devient fatigant. Même raisonnement que la colonne de texte du hub.
 *
 * ⚠️ NE PAS EXPRIMER CETTE LARGEUR EN `ch`. L'unité vaut la largeur du glyphe
 * « 0 », qui fait 11,2 px dans Geist alors que la moyenne d'une prose française
 * y est de 7,9 px. Un `max-width: 68ch` donne donc 764 px — plus large que la
 * colonne qu'il était censé réduire, et il ne servait à rien. Mesuré au canvas
 * sur une vraie phrase de l'article, pas sur un « 0 » répété.
 *
 * 35 rem = 560 px ≈ 71 caractères. Le couple texte + colonne latérale est
 * CENTRÉ, sinon les 190 px libérés retombent en vide à droite. */
.art-page .deux {
  grid-template-columns: minmax(0, 35rem) 280px;
  justify-content: center;
  gap: clamp(28px, 4vw, 72px);
}
@media (max-width: 940px) { .art-page .deux { grid-template-columns: minmax(0, 35rem); } }
.blog-prose h2 { font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(1.3rem,2.6vw,1.65rem); letter-spacing: -.02em;
  margin: 2.2em 0 .6em; line-height: 1.25; }
.blog-prose h3 { font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: 1.12rem; margin: 1.8em 0 .5em; }
.blog-prose p { margin: 0 0 1.15em; }
.blog-prose ul, .blog-prose ol { margin: 0 0 1.15em; padding-left: 1.15em; }
.blog-prose li { margin: .4em 0; }
.blog-prose strong { color: var(--ink); font-weight: 600; }
.blog-prose a { color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(176,82,44,.35); }
.blog-prose a:hover { border-bottom-color: currentColor; }
.blog-prose blockquote { margin: 34px 0; padding: 0 0 0 22px;
  border-left: 3px solid var(--branche, var(--accent));
  font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem,2.4vw,1.4rem);
  line-height: 1.4; letter-spacing: -.02em; color: var(--ink); }
.blog-prose img { border-radius: 12px; margin: 26px 0; }

/* ===================== 404 ===================== */
.vide { padding: clamp(60px,12vh,120px) 0; text-align: center; }
.vide h1 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem,3.4vw,2.1rem);
  letter-spacing: -.02em; margin: .6rem 0 0; }
.vide p { color: var(--muted); margin: 1rem 0 0; }
.vide .btn { display: inline-flex; margin-top: 1.6rem; padding: .82rem 1.5rem;
  border-radius: 10px; background: var(--ink); color: #fff; text-decoration: none;
  font-size: .9rem; font-weight: 600; }

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