/* ═══════════════════════════════════════════════════════════════
   CapIthaque — landing
   Palette et tokens repris de app/src/dossier.css (la marque = phare).
   Thème clair uniquement. Police unique Figtree (choix de marque) ;
   la hiérarchie vient du poids et de l'échelle, pas d'une 2e police.
   ═══════════════════════════════════════════════════════════════ */

/* Figtree auto-hébergée (comme l'app) : pas de dépendance à Google Fonts.
   url() est résolu par rapport à ce fichier (landing/styles.css). */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/figtree-latin.woff2') format('woff2');
}

:root {
  --c-navy: #194568;
  --c-beam: #e1cba7;
  --c-green: #284f4c;
  --c-sage: #7fb3a2;
  --c-sand: #e6d3a3;
  --c-coral: #f4a7a1;
  --c-sky: #a9c9d8;

  --bg: #f2eee5;
  --surface: #fffdf8;
  --surface-2: #faf7f0;
  --surface-3: #f2efe6;

  --ink: #1f4160;
  --ink-title: var(--c-navy);
  --muted: #5d7285;
  --border: #e2ddd0;
  --border-strong: #c9d2d8;

  --accent: var(--c-navy);
  --accent-ink: #fffdf8;

  --wash-warm: color-mix(in srgb, var(--c-beam) 26%, var(--surface));
  --wash-navy: color-mix(in srgb, var(--c-navy) 9%, var(--surface));
  --wash-sage: color-mix(in srgb, var(--c-sage) 20%, var(--surface));

  /* le faisceau du phare, réutilisé comme le fait l'app */
  --beam: linear-gradient(96deg,
      color-mix(in srgb, var(--c-beam) 62%, transparent) 0%,
      transparent 78%);

  /* teintes de cas (color: dans un template) */
  --case-deep: #2f4f5f;
  --case-sage: #517d6d;
  --case-sand: #a26a40;
  --case-coral: #b85850;
  --case-plum: #7d6a92;
  --case-sky: #4a7c99;

  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1120px;
  --font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { color: var(--ink-title); line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
h1 { font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-weight: 700; font-size: 1.15rem; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; font-family: inherit; font-weight: 600; font-size: 1rem;
  padding: .8rem 1.4rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(25, 69, 104, .25);
}
.btn-primary:hover { background: #143a58; box-shadow: 0 6px 18px rgba(25, 69, 104, .22); }
.btn-ghost { background: transparent; color: var(--c-navy); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--wash-navy); }
.btn-sm { padding: .55rem 1rem; font-size: .92rem; }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.08rem; }

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.5rem;
  /* La barre tient toute la largeur ; **son contenu reste dans la colonne**. Le fond translucide
     et le flou couraient jusqu'ici sur 1120 px seulement : au défilement, le texte passait sous
     un bandeau flouté au milieu et sous rien du tout sur les côtés — deux traitements pour une
     seule barre, ce qui se lit comme un défaut de rendu.

     Le retrait est calculé plutôt que posé dans un `<div>` intérieur : la même colonne que
     `.section` (`(100% - --maxw) / 2`, plus le retrait de 1.5rem que toutes les sections
     partagent), donc le logo s'aligne au pixel sur le contenu dessous **sans qu'aucune des sept
     pages ne change d'un caractère**. Le `max()` est ce qui tient sous 1120 px de fenêtre, où la
     moitié serait négative : on retombe alors sur le seul retrait de 1.5rem. */
  padding: .9rem max(1.5rem, calc((100% - var(--maxw)) / 2 + 1.5rem));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
}
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand-mark { display: grid; place-items: center; }
/* le vrai mark de l'app (brand/marque-petite.svg), forcé navy pour la landing claire */
.brand-logo { height: 30px; width: auto; display: block; }
.brand-word { font-weight: 800; font-size: 1.25rem; color: var(--c-navy); letter-spacing: -0.02em; }
.brand-i { color: var(--c-green); }
.site-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-left: auto; font-weight: 500; color: var(--muted); }
/* `nowrap` : un intitulé de nav coupé en son milieu — « Comment / ça / marche » sur trois
   lignes — n'est plus un onglet, c'est un paragraphe. La nav peut passer à la ligne *entre*
   ses entrées (`flex-wrap` ci-dessus), jamais **dans** l'une d'elles. */
.site-nav a { padding: .3rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--c-navy); border-bottom-color: var(--c-beam); }
/* « Vous êtes ici. » — deux marques *distinctes*, pas une seule réutilisée. Le survol est
   passager, donc doux : filet beam. La position courante est permanente, donc franche : filet
   navy. Les dessiner pareil casserait la nav dès qu'on survole un autre onglet depuis la page
   courante — deux liens soulignés à l'identique, et plus rien qui dise lequel est vrai.
   Un seul sélecteur pour les deux origines de la marque : `page` (posé dans le HTML, la page
   elle-même), `true` (une page de cette rubrique) et `location` (posé par le spy, la section
   à l'écran). Ce qui les distingue relève du lecteur d'écran, pas de l'œil. */
.site-nav a[aria-current] { color: var(--c-navy); border-bottom-color: var(--c-navy); }
.site-header .btn { flex-shrink: 0; }
/* Le libellé court n'apparaît qu'en dessous de 480 px (plus bas dans ce fichier). */
.cta-short { display: none; }

/* ── Hero ────────────────────────────────────────────────── */
.eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
  font-weight: 700; color: var(--c-green); margin-bottom: .9rem;
}
.hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) 1.5rem clamp(3rem, 7vw, 6rem);
}
.hero-copy h1 { margin-bottom: 1.1rem; }
.lede { font-size: 1.2rem; color: var(--ink); max-width: 34ch; }
.lede strong { color: var(--c-navy); font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.4rem; }
.trust {
  display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; padding: 0; margin: 0;
  font-size: .9rem; color: var(--muted);
}
.trust li { display: flex; align-items: center; gap: .45rem; }
.trust li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-sage); flex-shrink: 0;
}

/* ── Zones d'illustration réservées ──────────────────────────
   Chaque .illus attend une image du même style que le cas DDE
   appartement (assets/*.webp). Sans image, le slot reste dessiné :
   wash chaud, cadre pointillé, faisceau discret, libellé du slot. */
.illus {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius); background: var(--wash-warm);
  border: 1px solid var(--border);
  display: grid; place-items: center;
}
/* 🐞 **Le libellé de remplissage restait affiché sous l'image**, et il ne la recouvrait pas : il
   la *poussait*. `.illus` est une grille sans `grid-template`, donc ses deux enfants — le
   `::before` et l'`<img>` — tombent dans **deux rangées implicites**. Mesuré : `20,47px 317,86px`.
   Le libellé prenait 20px en haut, l'image héritait du reste, débordait d'autant et se faisait
   couper en bas par l'`overflow: hidden`. Un `z-index` n'y pouvait rien — ce n'était pas un
   problème d'empilement mais de place.
   Le libellé n'a de sens que tant que l'image manque, donc il disparaît dès qu'il y en a une. Et
   ça se recoud tout seul avec l'`onerror="this.remove()"` du HTML : une image en 404 est retirée
   du DOM, `:has(img)` redevient faux, le libellé revient. */
.illus:has(img)::before {
  display: none;
}
.illus::before {
  content: attr(data-illus);
  color: color-mix(in srgb, var(--c-navy) 55%, transparent);
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-transform: lowercase;
}
.illus::after { /* faisceau discret, coin haut-droit */
  content: ""; position: absolute; inset: 0; background: var(--beam);
  opacity: .5; pointer-events: none;
}
.illus img {
  position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.illus-hero { aspect-ratio: 3 / 2; }
.illus-step { aspect-ratio: 4 / 3; margin-bottom: 1rem; }
.illus-case { aspect-ratio: 4 / 3; margin-bottom: 1rem; background: color-mix(in srgb, var(--case) 12%, var(--surface)); }
.illus-case::before { color: color-mix(in srgb, var(--case) 75%, transparent); }
.illus-why { aspect-ratio: 1 / 1; }

/* ── Sections génériques ─────────────────────────────────── */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) 1.5rem; }
.section-alt { max-width: none; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-alt > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.section-head { max-width: 52ch; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section-head .eyebrow { margin-bottom: .6rem; }
.section-sub { color: var(--muted); font-size: 1.08rem; margin-top: .8rem; }

/* ── Étapes ──────────────────────────────────────────────── */
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
/* Le numéro et le titre sur **une seule ligne**. Empilés, la pastille se lisait comme une
   vignette de plus au-dessus du titre ; côte à côte, elle redevient ce qu'elle est — le rang de
   l'étape, qui appartient au titre.

   Une grille de deux colonnes plutôt qu'un `<div>` enveloppant les deux : le `<h3>` reste un
   enfant direct de son `<li>`, donc un vrai titre au même niveau que le paragraphe qu'il
   annonce, et **les quatre cartes du HTML ne changent pas**. L'ordre du document est déjà le bon,
   il ne manquait que la mise en page. */
.step {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem;
  display: grid; grid-template-columns: auto 1fr;
  gap: .5rem .6rem; align-items: center;
}
/* Le dessin et le texte gardent toute la largeur : seule la ligne du milieu est en deux colonnes. */
.step > .illus-step,
.step p { grid-column: 1 / -1; }
.step-num {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--wash-navy); color: var(--c-navy);
  font-weight: 800; font-size: .95rem;
}
.step p { color: var(--muted); font-size: .96rem; }

/* ── Cas couverts ────────────────────────────────────────── */
.cases {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.case {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.3rem;
  transition: transform .14s ease, box-shadow .14s ease;
}
.case:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(25, 69, 104, .1); }
.case h3 { margin-bottom: .4rem; color: var(--case); }
.case p { color: var(--muted); font-size: .96rem; margin-bottom: 1rem; }
.tag {
  display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .03em;
  padding: .25rem .6rem; border-radius: 999px;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--border);
}
.tag-live {
  background: var(--wash-sage);
  color: var(--c-green);
  border-color: color-mix(in srgb, var(--c-sage) 45%, var(--surface));
}

/* ── Pourquoi ────────────────────────────────────────────── */
.why {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.feature-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.4rem; }
.feature-list li { position: relative; padding-left: 1.6rem; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .5rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-beam); box-shadow: 0 0 0 4px var(--wash-warm);
}
.feature-list h3 { margin-bottom: .25rem; }
.feature-list p { color: var(--muted); }

/* ── Honnêteté ───────────────────────────────────────────── */
.honesty { max-width: 60ch; margin: 0 auto; text-align: center; }
.honesty h2 { margin-bottom: 1rem; }
.honesty p { color: var(--ink); font-size: 1.12rem; }
.honesty strong { color: var(--c-navy); }

/* ── CTA final (faisceau) ────────────────────────────────── */
.cta-band {
  background:
    var(--beam),
    linear-gradient(160deg, var(--c-navy), var(--c-green));
  color: var(--surface);
}
.cta-inner {
  max-width: var(--maxw); margin: 0 auto; text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) 1.5rem;
}
.cta-inner h2 { color: var(--surface); margin-bottom: .8rem; }
.cta-inner p { color: color-mix(in srgb, var(--surface) 82%, transparent); font-size: 1.12rem; margin-bottom: 1.8rem; }
.cta-band .btn-primary { background: var(--surface); color: var(--c-navy); }
.cta-band .btn-primary:hover { background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  max-width: var(--maxw); margin: 0 auto;
  padding: 2.6rem 1.5rem; display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr; gap: 1.5rem; align-items: start;
}
.foot-brand .brand-word { font-size: 1.15rem; }
.foot-brand p { color: var(--muted); font-size: .92rem; margin-top: .4rem; max-width: 26ch; }
.foot-nav { display: grid; gap: .5rem; font-weight: 500; color: var(--muted); }
.foot-nav a:hover { color: var(--c-navy); }
.foot-legal { color: var(--muted); font-size: .82rem; text-align: right; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 880px) {
  /* ── La barre passe à deux lignes ─────────────────────────────────────────────────────────
     Au-dessus de ~868 px les trois blocs tiennent côte à côte ; en dessous, la nav se faisait
     écraser et ses intitulés se cassaient mot par mot, jusqu'à pousser le bouton **hors de la
     page** — 733 px de contenu dans une fenêtre de 600.

     Deux lignes plutôt que masquer la nav : la masquer était la réponse d'avant, et elle coûtait
     la navigation entière sur tout ce qui n'est pas un grand écran. La barre est le seul endroit
     où ces liens vivent en haut de page.

       ligne 1   marque ····································· Démarrez gratuitement
       ligne 2   Comment ça marche   Cas couverts   Pourquoi   Blog

     L'ordre du DOM reste marque → nav → bouton, qui est le bon ordre de lecture ; seul l'affichage
     réordonne. Le `flex-basis: 100%` est ce qui met la nav sur sa propre ligne, et le
     `margin-left: auto` du bouton est ce qui garde l'écart de la ligne 1. */
  .site-header { flex-wrap: wrap; row-gap: .55rem; }
  .site-header .btn { order: 2; margin-left: auto; }
  .site-nav { order: 3; flex-basis: 100%; margin-left: 0; }

  .hero { grid-template-columns: 1fr; }
  .illus-hero { order: -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cases { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: 1fr; }
  .illus-why { max-width: 420px; }
  .site-footer { grid-template-columns: 1fr; }
  .foot-legal { text-align: left; }
}
@media (max-width: 560px) {
  /* ⛔ `.site-nav { display: none }` était ici. C'était la seule réponse au débordement, et elle
     supprimait la navigation au lieu de la placer. La ligne 2 ci-dessus la remplace. */
  .steps, .cases { grid-template-columns: 1fr; }
  .lede { max-width: none; }
}

/* Sous 480 px, la ligne 1 ne tient plus telle quelle : marque 170 + bouton 191 demandent 385 px
   quand la fenêtre n'en offre que 342. Les deux rétrécissent ensemble plutôt que l'un des deux
   disparaisse — sur une page vitrine, le nom du produit et l'appel à l'action sont précisément les
   deux choses qu'on ne peut pas retirer. */
@media (max-width: 480px) {
  /* Sous 480 px, « Démarrez gratuitement » et le nom du produit demandent ensemble 345 px pour
     342 disponibles — trois pixels, et le bouton tombait sur une troisième ligne.

     C'est le **libellé** qui cède, pas la taille du texte : rapetisser un appel à l'action jusqu'à
     ce qu'il rentre donne un bouton que personne ne lit, et c'est précisément le bouton de la
     page. « Démarrer » dit la même chose en trois fois moins de place, à corps constant. Le
     libellé long reste dans le HTML pour les grands écrans — c'est un échange, pas une troncature.

     ⚠️ Les deux libellés sont dans le DOM en permanence, donc un lecteur d'écran les lirait tous
     les deux : `.cta-long`/`.cta-short` s'excluent par `display: none`, qui retire vraiment de
     l'arbre d'accessibilité — pas par une astuce de position hors écran, qui ne le fait pas. */
  .cta-long { display: none; }
  .cta-short { display: inline; }

  .site-header { gap: .75rem; }
  /* La nav tient sur **une** ligne, ce qui est ce qui garde la barre à deux lignes : à 1rem
     d'écart les quatre intitulés demandaient 358 px pour 342, et « Blog » partait seul sur une
     troisième ligne — la pire des mises en page, parce qu'elle a l'air d'un bug plutôt que d'un
     choix. Le corps descend peu (.88rem) et l'écart beaucoup : c'est l'écart qui coûtait le plus,
     et c'est celui des deux qu'on peut réduire sans toucher à la lisibilité.

     ⚠️ Le `padding` vertical **augmente** en même temps. Réduire le texte d'un lien réduit sa
     cible tactile, et une cible qui rétrécit sur l'écran où l'on vise avec un doigt est le
     contraire de ce qu'il faut : les 6,4 px rendus ici compensent les 2 px perdus sur le corps. */
  .site-nav { gap: .7rem; font-size: .88rem; }
  .site-nav a { padding: .45rem 0; }
}

/* Dernier palier, pour les téléphones de 360 et 375 px — iPhone SE et le gros du parc Android.
   À 390 px la nav tenait sur une ligne, à 375 elle repassait à deux et la barre gagnait 50 px
   qu'elle gardait à l'écran en permanence. Rien ne disparaît : c'est l'écart entre les entrées
   qui fond d'abord, le corps ensuite, et le `padding` vertical qui tient la cible tactile. */
@media (max-width: 400px) {
  .site-nav { gap: .55rem; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .case { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Blog — listing + article. SEO/GEO : structure sémantique, prose
   lisible, blocs TL;DR et FAQ extractibles par les moteurs.
   ═══════════════════════════════════════════════════════════════ */
.page-head {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem clamp(1.5rem, 3vw, 2.5rem);
}
.breadcrumb { font-size: .88rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb a:hover { color: var(--c-navy); }
.breadcrumb [aria-current] { color: var(--ink); }
.page-head h1 { margin-bottom: .8rem; }
.page-head .section-sub { margin-top: 0; max-width: 60ch; }

/* Listing */
.post-grid {
  max-width: var(--maxw); margin: 0 auto;
  padding: 1rem 1.5rem clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}
.post-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(25, 69, 104, .1); }

/* ── Toute la carte est cliquable ────────────────────────────────────────────
 *
 * Le lien du titre est **étiré** sur la carte entière : `::after` en absolu, `inset: 0`. La carte
 * se soulève déjà au survol — elle se comportait donc comme un objet cliquable en n'en étant pas
 * un, sauf sur l'image et sur le titre. « Lire l'article → », lui, n'a jamais été un lien du
 * tout : un appel à l'action qui ne réagit pas est pire qu'une absence d'appel.
 *
 * ⚠️ **Pourquoi étirer un lien plutôt qu'envelopper la carte dans un `<a>`.** Un `<a>` autour de
 * tout aplatit la structure : le titre cesse d'être un titre pour l'arbre d'accessibilité, et
 * tout autre lien qu'on ajouterait dans la carte deviendrait un lien dans un lien, ce qui n'est
 * pas valide. Ici le `<h2><a>` reste un vrai titre avec un vrai lien, dont le texte sert de nom
 * accessible — c'est la carte qui vient à lui.
 *
 * 💡 Ça a aussi **retiré un doublon** : l'image portait son propre lien vers le même article,
 * avec un `aria-label` répétant le titre. Un lecteur d'écran annonçait donc chaque article deux
 * fois. Une carte, une destination, une annonce.
 *
 * ⚠️ Si un second lien arrive un jour dans une carte (un tag, un auteur), il lui faudra
 * `position: relative; z-index: 1` pour repasser au-dessus de la zone étirée. */
.post-card { position: relative; }
.post-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Rien de visible : la zone ne fait que capter le clic. Le style du survol reste porté par la
     carte, pas par cette couche. */
  border-radius: inherit;
  /* 🐞 Sans `z-index`, l'image ne réagissait pas — et c'est la moitié de la surface. `.illus img`
     porte `z-index: 1` (posé pour passer au-dessus du faisceau décoratif de `.illus::after`),
     donc elle peignait par-dessus la zone étirée, restée à `auto`. Le reste de la carte
     fonctionnait, ce qui rendait le défaut d'autant plus déroutant : la partie la plus évidente à
     cliquer était la seule inerte. */
  z-index: 2;
}
/* Le curseur sur toute la surface, sinon seule la zone du texte annonce qu'on peut cliquer. */
.post-card { cursor: pointer; }
.post-card .illus { border: 0; border-radius: 0; aspect-ratio: 16 / 9; }
.post-card-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-meta { font-size: .8rem; color: var(--muted); display: flex; gap: .6rem; flex-wrap: wrap; }
.post-cat {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-green); align-self: flex-start;
}
.post-card h2 { font-size: 1.2rem; }
.post-card h2 a:hover { color: var(--c-navy); }
.post-card p { color: var(--muted); font-size: .95rem; flex: 1; }
.post-card .more { font-weight: 600; color: var(--c-navy); font-size: .92rem; margin-top: .3rem; }

/* Article */
.article { max-width: 720px; margin: 0 auto; padding: 0 1.5rem clamp(3rem, 6vw, 5rem); }
.article-head { max-width: 720px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 1.5rem 1.5rem; }
.article-head .post-meta { margin-top: 1rem; }
.article-hero { max-width: 860px; margin: 1.5rem auto; }
.article-hero .illus { aspect-ratio: 16 / 9; }
.prose { font-size: 1.08rem; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.4rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .4rem; }
/* 🐞 `:not(.btn)`, et sans lui un bouton posé dans un article était **invisible**.
   `.prose a` (0,2,0) bat `.btn-primary` (0,1,0), donc le bouton héritait de la couleur des liens
   de prose — navy — par-dessus son propre fond navy : mesuré **1:1**, du texte de la couleur
   exacte de son fond. Il héritait aussi du soulignement, qu'un bouton n'a pas à porter.
   La règle dit maintenant ce qui est vrai : **un bouton dans de la prose n'est pas un lien de
   prose**. Formulé comme une exclusion plutôt qu'en remontant la spécificité de `.btn`, parce
   qu'une exclusion couvre les variantes de bouton qui n'existent pas encore. */
.prose a:not(.btn) { color: var(--c-navy); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--c-navy); }

/* TL;DR — résumé extractible (GEO) */
.tldr {
  background: var(--wash-navy); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin: 1.5rem 0 2rem;
}
.tldr h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--c-green); margin: 0 0 .6rem;
}
.tldr p { margin: 0; font-weight: 500; }

/* FAQ — questions/réponses (SEO rich results + GEO) */
.faq { margin-top: 2.6rem; }
.faq h2 { margin-bottom: 1rem; }
.faq-item { border-top: 1px solid var(--border); padding: 1.1rem 0; }
.faq-item h3 { font-size: 1.08rem; margin: 0 0 .4rem; }
.faq-item p { color: var(--ink); margin: 0; }

.article-cta {
  margin: 2.8rem 0 0; padding: 1.6rem; text-align: center;
  background: var(--wash-warm); border-radius: var(--radius);
}
.article-cta p { margin: 0 0 1rem; font-weight: 500; }
.disclaimer {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border);
  font-size: .9rem; color: var(--muted);
}

@media (max-width: 880px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* Encadrés d'article : l'erreur à éviter (coral) et le mini-cas / bridge (sage). */
.callout { border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.7rem 0; }
.callout h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .5rem; }
.callout p { margin: 0; }
.callout-warn { background: color-mix(in srgb, var(--c-coral) 20%, var(--surface)); }
.callout-warn h3 { color: #9c4a44; }
.callout-case { background: var(--wash-sage); }
.callout-case h3 { color: var(--c-green); }
.callout-case .btn { margin-top: .9rem; }

/* Amorce vers la page "Notre approche" sous la section honnêteté. */
.honesty-more { margin-top: 1rem; color: var(--muted); font-size: .98rem; }
.honesty-more a { color: var(--c-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }