/* ═══════════════════════════════════════════════════════════
   SuccessRev — le blog. Charte « Viseur », v1.0 (BRAND.md).
   ═══════════════════════════════════════════════════════════
   La feuille partagée par les pages liste (blog/<lang>/index.html) et par
   chaque article (blog/<lang>/<slug>.html). Partagée et non copiée dans
   chaque page, contrairement aux autres pages publiques : avec N articles
   dans deux langues, une copie par fichier finirait par dériver.

   ⚠ TOUTE couleur se déclare ici, dans :root, et nulle part ailleurs
   (contrôle 5 de preflight.sh, qui lit aussi ce fichier ; tests.html,
   suite 53, le redit). Le bloc SITEFOOT est la copie à l'identique de
   celui des cinq pages publiques.                                      */
:root{
  --ink:#1E1B4B;
  --ink-hover:#2B2766;
  --impact:#F59E0B;
  --impact-ink:#8A5A00;
  --danger:#9F2D20;
  --text:#3F3D54;
  --muted:#6B6A80;
  --line:#E6E5EF;
  --surface:#FFFFFF;
  --page:#F7F7FA;
  --wash:#FCFCFD;
  --dash:#C9C7D8;
  --on-ink:#EDECF4;
  --on-ink-soft:#C9C7DD;
  --on-ink-mute:#A9A7BD;
  --on-ink-line:rgba(255,255,255,.14);

  --radius:2px;
  --impact-sq:6px;
  --font:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1080px;
  --col:680px;          /* la colonne de lecture */
  --measure:56ch;       /* 72 caractères en Archivo à 17 px, mesuré comme dans l'app */
}

/* ── base ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-underline-offset:3px;
}
h1,h2,h3{font-family:var(--font);font-weight:700;margin:0;letter-spacing:-.035em;text-wrap:balance}
p{margin:0 0 14px;text-wrap:pretty}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:0}
::selection{background:var(--impact);color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.col{max-width:var(--col);margin:0 auto;padding:0 20px}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}

/* ── en-tête ───────────────────────────────────────────── */
.topbar{background:var(--page);border-bottom:1px solid var(--line)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.brand__glyph{width:26px;height:26px;flex:none;display:block;color:var(--ink)}
.brand__name{font-weight:700;font-size:17px;letter-spacing:-.045em}
.topnav{display:flex;align-items:center;gap:4px}
.topnav .link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--radius);
  font-weight:500;font-size:13px;color:var(--text);text-decoration:none;transition:color .2s ease,background .2s ease;
}
.topnav .link:hover{color:var(--ink);background:var(--line)}
.topnav .link[aria-current="page"]{color:var(--ink);font-weight:700}

/* ── boutons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:11px 22px;border-radius:var(--radius);
  font-weight:600;font-size:14px;letter-spacing:-.01em;text-decoration:none;
  transition:background .2s ease,border-color .2s ease;
}
.btn--pri{background:var(--ink);color:var(--surface)}       /* l'ambre n'est jamais un fond de bouton */
.btn--pri:hover{background:var(--ink-hover)}
.btn--ghost{background:var(--surface);color:var(--ink);border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--page)}
.btn--sm{min-height:36px;padding:7px 14px;font-size:13px}

/* ═══ 1 · LA PAGE LISTE ═════════════════════════════════ */
.bhead{padding:56px 0 28px;border-bottom:1px solid var(--line)}
.bhead h1{font-size:40px;line-height:1.08;max-width:16em}
.bhead__sub{max-width:36em;margin:16px 0 0;font-size:17px;color:var(--text)}

.tagbar{display:flex;flex-wrap:wrap;gap:8px;padding:20px 0 0}
.tagbar button{
  min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  font-size:13px;font-weight:500;color:var(--text);transition:border-color .2s ease;
}
.tagbar button:hover{border-color:var(--text)}
.tagbar button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}   /* état « nailé » */

.plist{list-style:none;margin:0;padding:8px 0 80px}
.pcard{border-bottom:1px solid var(--line)}
.pcard__a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 32px;padding:26px 0;text-decoration:none}
.pcard__kick{grid-column:1 / -1}
.pcard__t{font-size:26px;line-height:1.15;max-width:22em}
.pcard__a:hover .pcard__t{text-decoration:underline;text-decoration-thickness:1px}
.pcard__d{grid-column:1;margin:4px 0 0;max-width:var(--measure);color:var(--text)}
.pcard__meta{grid-column:2;grid-row:2;align-self:start;padding-top:4px;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.plist:not(:has(li)){display:none}     /* pas encore d'article : seule la mention reste */
.plist__empty{padding:40px 0 80px;color:var(--muted)}

/* ═══ 2 · L'ARTICLE ═════════════════════════════════════ */
.post__head{padding:48px 0 28px}
.post__crumb{display:inline-flex;align-items:center;min-height:40px;margin-bottom:18px;font-size:13px;color:var(--text);text-decoration:none}
.post__crumb:hover{color:var(--ink);text-decoration:underline}
.post__head h1{margin-top:10px;font-size:40px;line-height:1.08}
.post__lede{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--text)}
.post__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.post__meta span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}

/* Le sommaire : rempli par blog.js à partir des ## ; absent sans JS. */
.post__toc{margin:4px 0 32px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.post__toc ol{margin:8px 0 0;padding-left:20px}
.post__toc li{margin:2px 0;font-size:15px;color:var(--text)}
.post__toc li::marker{font-family:var(--mono);font-size:11px;color:var(--muted)}
.post__toc a{text-decoration:none}
.post__toc a:hover{text-decoration:underline}

.post__body{padding-bottom:24px;font-size:17px;line-height:1.65;color:var(--text)}
.post__body > *{max-width:var(--measure)}
.post__body h2{margin:44px 0 14px;font-size:26px;line-height:1.15;color:var(--ink);scroll-margin-top:24px}
.post__body h3{margin:30px 0 10px;font-size:17px;line-height:1.3;color:var(--ink);letter-spacing:-.02em}
.post__body ul,.post__body ol{margin:0 0 16px;padding-left:22px}
.post__body li{margin-bottom:6px}
.post__body li::marker{color:var(--muted)}
.post__body strong{color:var(--ink)}
.post__body code{font-family:var(--mono);font-size:.82em;color:var(--ink)}
.post__body a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px}
.post__body blockquote{margin:24px 0;padding:2px 0 2px 18px;border-left:1px solid var(--ink);color:var(--ink);font-size:17px}
.post__body figure{margin:28px 0}
.post__body img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius)}
.post__body figcaption{margin-top:8px;font-size:13px;color:var(--muted)}

/* Les encadrés : un filet, un libellé mono précédé d'un carré de 6 px
   (charte : pas de fond teinté, pas de règle colorée de 3 px). */
.callout,.warn,.tmpl{margin:24px 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:15px}
.callout{border-color:var(--ink)}
.callout > :last-child,.warn > :last-child{margin-bottom:0}
.callout__l,.warn__l,.tmpl__l{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.callout__l::before,.warn__l::before,.tmpl__l::before{content:"";flex:none;width:var(--impact-sq);height:var(--impact-sq);background:var(--ink)}
.warn__l::before{background:var(--impact)}
.tmpl__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.tmpl__head .tmpl__l{margin:0}
.tmpl__body{margin:0;white-space:pre-wrap;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink)}
.tmpl__copy{min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);font-size:13px;color:var(--text)}
.tmpl__copy:hover{border-color:var(--text)}

/* Un tableau simple ; sous 640 px chaque ligne s'empile, libellée par data-c. */
.post__table{width:100%;margin:24px 0;border-collapse:collapse;font-size:15px}
.post__table th,.post__table td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.post__table th{font-family:var(--mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.post__body .post__table{max-width:none}

/* Questions fréquentes : des <details> natifs, ouverts sans JS. */
.faq{margin:16px 0 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:52px;padding:12px 0;cursor:pointer;font-weight:600;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--mono);font-size:17px;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding:0 0 16px}
.faq details > div > :last-child{margin-bottom:0}

/* L'appel à l'action : la seule zone cadrée de l'écran (charte § 06). */
.post__cta{position:relative;margin:48px 0 0;padding:30px 28px}
.post__cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  --a:28px; --w:2px;
  background:
    linear-gradient(var(--ink),var(--ink))   0%   0%/var(--a) var(--w) no-repeat,
    linear-gradient(var(--ink),var(--ink))   0%   0%/var(--w) var(--a) no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100%   0%/var(--a) var(--w) no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100%   0%/var(--w) var(--a) no-repeat,
    linear-gradient(var(--ink),var(--ink))   0% 100%/var(--a) var(--w) no-repeat,
    linear-gradient(var(--ink),var(--ink))   0% 100%/var(--w) var(--a) no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 100%/var(--a) var(--w) no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 100%/var(--w) var(--a) no-repeat;
}
.post__cta h2{font-size:26px;line-height:1.15}
.post__cta p{margin:10px 0 18px;max-width:var(--measure);color:var(--text)}
.post__cta__acts{display:flex;flex-wrap:wrap;gap:10px}

.post__related{margin:48px 0 0;padding-bottom:80px}
.post__related ul{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.post__related li{border-bottom:1px solid var(--line)}
.post__related a{display:flex;align-items:center;min-height:52px;padding:10px 0;font-weight:600;text-decoration:none}
.post__related a:hover{text-decoration:underline}

/* SITEFOOT:début ────────────────────────────────────────────
   Le pied de page partagé — copie identique dans landing.html, quiz.html,
   roi.html, privacy.html et feedback.html (tests.html, suite 50, compare
   les copies). Fond d'encre, logotype inversé sans conteneur (charte § 2),
   trois colonnes titrées en libellé mono, un filet, puis © à gauche et le
   sélecteur de langue à droite — le seul endroit où l'on change de langue.
   Une largeur fixe et non le --wrap de la page : le pied est le même
   partout. Aucun hex ici, rien que des jetons du :root.
   ─────────────────────────────────────────────────────────── */
.sitefoot{background:var(--ink);color:var(--on-ink-soft);padding:56px 0 24px}
.sitefoot__in{max-width:1080px;margin:0 auto;padding:0 20px}
.sitefoot__top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);gap:40px}
.sitefoot__mark{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--surface);text-decoration:none}
.sitefoot__mark svg{width:24px;height:24px;flex:none;display:block}
.sitefoot__mark span{font-family:var(--font);font-weight:700;font-size:17px;letter-spacing:-.045em}
.sitefoot__tag{margin:8px 0 0;max-width:320px;font-size:13px;line-height:1.55;color:var(--on-ink-mute)}
.sitefoot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sitefoot__h{margin:0 0 8px;font-family:var(--mono);font-weight:500;font-size:11px;line-height:1.4;
  text-transform:uppercase;letter-spacing:.12em;color:var(--on-ink-mute)}
.sitefoot__col ul{list-style:none;margin:0;padding:0}
.sitefoot__col a{display:inline-flex;align-items:center;min-height:40px;font-size:15px;color:var(--on-ink-soft);
  text-decoration:none;transition:color .2s ease}
.sitefoot__col a:hover{color:var(--surface)}
.sitefoot__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:48px;padding-top:20px;border-top:1px solid var(--on-ink-line)}
.sitefoot__copy{margin:0;font-size:13px;color:var(--on-ink-mute)}
.sitefoot__bar .langsel{margin-left:auto}   /* repliée sur deux lignes, la boîte reste à droite */
.sitefoot :focus-visible{outline:2px solid var(--impact);outline-offset:2px}

/* Le sélecteur de langue (charte § 6) : une boîte cernée d'un filet, globe,
   nom de la langue dans sa propre langue, chevron. La liste s'ouvre vers le
   haut ; la langue courante porte le carré ambre, l'état « en cours ».
   <details> : il s'ouvre même sans JS, et ses entrées sont de vrais liens. */
.langsel{position:relative}
.langsel > summary{
  list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;
  border:1px solid var(--on-ink-line);border-radius:var(--radius);color:var(--on-ink);
  font-family:var(--font);font-weight:500;font-size:14px;cursor:pointer;user-select:none;
  transition:border-color .2s ease;
}
.langsel > summary::-webkit-details-marker{display:none}
.langsel > summary:hover,.langsel[open] > summary{border-color:var(--on-ink-mute)}
.langsel__ico{flex:none;display:block}
.langsel__chev{flex:none;display:block;transition:transform .2s ease}
.langsel[open] .langsel__chev{transform:rotate(180deg)}
.langsel__pop{
  position:absolute;right:0;bottom:calc(100% + 6px);z-index:60;min-width:100%;
  margin:0;padding:4px;list-style:none;
  background:var(--ink);border:1px solid var(--on-ink-line);border-radius:var(--radius);
}
.langsel__pop a{
  display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:var(--radius);
  color:var(--on-ink-soft);font-size:14px;text-decoration:none;white-space:nowrap;
}
.langsel__pop a::before{content:"";flex:none;width:6px;height:6px}
.langsel__pop a:hover{background:var(--ink-hover);color:var(--surface)}
.langsel__pop a[aria-current="true"]{color:var(--surface)}
.langsel__pop a[aria-current="true"]::before{background:var(--impact)}

@media (max-width:760px){
  .sitefoot{padding-top:44px}
  .sitefoot__top{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .sitefoot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .sitefoot__bar{margin-top:36px}
}
/* SITEFOOT:fin ─────────────────────────────────────────────── */

@media (max-width:640px){
  .topnav .link{display:none}
  .topnav .link[data-keep]{display:inline-flex}
  .bhead{padding:36px 0 22px}
  .bhead h1,.post__head h1{font-size:26px}
  .pcard__a{grid-template-columns:minmax(0,1fr)}
  .pcard__t{font-size:17px}
  .pcard__meta,.pcard__d{grid-column:auto;grid-row:auto}
  .post__head{padding:28px 0 20px}
  .post__body{font-size:15px}
  .post__body h2{font-size:17px;margin-top:36px}
  .post__cta{padding:24px 20px}
  .post__cta h2{font-size:17px}
  .post__table thead{display:none}
  .post__table tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .post__table td{display:block;padding:2px 0;border:0}
  .post__table td[data-c]::before{content:attr(data-c) " · ";font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important}
}