/* =========================================================
   Trading Evolution — pages documentaires générées (hub et indicateurs NinjaTrader, pages de confiance, 404)
   Chargé uniquement par ces pages, en complément de styles.css (mêmes jetons de design).
   1. Mise en page et thème sombre (rendu d'origine, inchangé)
   2. Communs aux deux thèmes : typographie des titres, micro-animations
   3. Thème clair « finance premium » (défaut) : html:not([data-theme="dark"])
   ========================================================= */
.pg-links { display: flex; gap: .15rem; margin-inline-start: var(--s-2); min-width: 0; }
.pg-links a { color: var(--ink-2); font-weight: 500; font-size: var(--t-sm); padding: .5rem .75rem; border-radius: var(--r-sm); white-space: nowrap; transition: all var(--d-fast) var(--ease); }
.pg-links a:hover { background: rgba(255,255,255,.06); color: #fff; }

.pg { max-width: var(--wrap); margin: 0 auto; padding: var(--s-8) var(--s-8) var(--s-16); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 var(--s-8); padding: 0; list-style: none; font-size: var(--t-sm); color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-inline-end: .35rem; opacity: .6; }
[dir="rtl"] .crumbs li + li::before { content: "‹"; }
.crumbs a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: var(--ink); }

.pg-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-10); align-items: center; margin-bottom: var(--s-8); }
.pg-hero-hub { grid-template-columns: minmax(0, 1fr); max-width: 54rem; }
.pg-hero h1 { font-family: var(--f-disp); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; color: #fff; margin-bottom: var(--s-5); }
.pg-hero .lead { margin-bottom: var(--s-6); }
.pg-hero .cta-row { margin-bottom: var(--s-3); }
.pg-shot { margin: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-lg); }
.pg-shot img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

.pg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-12); }
.pg-facts div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); }
.pg-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pg-facts dd { margin: .3rem 0 0; color: #fff; font-weight: 600; font-size: var(--t-sm); }

.pg-sec { max-width: 62rem; margin: 0 0 var(--s-12); scroll-margin-top: 88px; }
.pg-sec h2 { font-family: var(--f-disp); font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #fff; margin-bottom: var(--s-4); }
.pg-sec h3 { font-size: 1.02rem; color: #fff; margin: var(--s-6) 0 var(--s-3); }
.pg-sec p { color: var(--ink-2); line-height: 1.7; margin-bottom: var(--s-3); }
.pg-sec code { font-family: var(--f-mono); font-size: .85em; background: rgba(255,255,255,.07); padding: .1rem .35rem; border-radius: 5px; direction: ltr; unicode-bidi: isolate; word-break: break-all; }
.pg-sec a:not(.btn) { color: var(--blue-300); text-decoration: underline; text-underline-offset: 3px; }
.pg-note { font-size: var(--t-sm); color: var(--muted) !important; }

.pg-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.pg-steps li { counter-increment: step; position: relative; padding: var(--s-4); padding-inline-start: calc(var(--s-4) + 2.4rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink-2); line-height: 1.65; }
.pg-steps li::before { content: counter(step); position: absolute; inset-inline-start: var(--s-4); top: var(--s-4); width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-300); font-weight: 800; font-size: .82rem; }
.pg-steps strong { color: #fff; }
.pg-list li { margin: .55rem 0; line-height: 1.65; }

.pg-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--s-3); background: rgba(255,255,255,.015); }
.pg-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.pg-table caption { caption-side: bottom; text-align: start; padding: var(--s-3) var(--s-4); color: var(--muted); font-size: var(--t-xs); }
.pg-table th, .pg-table td { padding: .7rem var(--s-4); text-align: start; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.pg-table thead th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: rgba(255,255,255,.03); white-space: nowrap; }
.pg-table tbody th { color: #fff; font-weight: 600; min-width: 13rem; }
.pg-table tbody th small { display: block; margin-top: .2rem; color: var(--muted); font-weight: 500; font-size: 11px; }
.pg-table td { color: var(--ink-2); line-height: 1.55; }
.pg-table td.mono { color: var(--blue-300); white-space: nowrap; }
.pg-table tbody tr:last-child > * { border-bottom: 0; }

.pg-faq { max-width: none; margin: 0; }
.pg-related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-3); }
.pg-related li { display: grid; gap: .35rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); }
.pg-sec .pg-related a { color: #fff; font-weight: 700; text-decoration: none; }
.pg-sec .pg-related a:hover { color: var(--blue-300); }
.pg-related span { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }
.pg-disclaimer { max-width: 62rem; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-xs); line-height: 1.6; }
.pg-disclaimer a { color: var(--blue-300); text-decoration: underline; }

.pg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-5); }
.pg-card > a { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); text-decoration: none !important; transition: transform var(--d-base) var(--ease), border-color var(--d-base); }
.pg-card > a:hover { transform: translateY(-4px); border-color: var(--blue-200); }
.pg-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-bottom: 1px solid var(--line-2); }
.pg-card h3 { margin: var(--s-4) var(--s-5) .4rem; color: #fff; font-size: 1.05rem; }
.pg-card p { flex: 1; margin: 0 var(--s-5); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; }
.pg-card-cta { margin: var(--s-4) var(--s-5) var(--s-5); color: var(--blue-300); font-weight: 700; font-size: var(--t-sm); }
.pg-badge { position: absolute; top: var(--s-3); inset-inline-start: var(--s-3); padding: .2rem .6rem; border-radius: var(--r-full); background: rgba(34,197,94,.16); border: 1px solid rgba(34,197,94,.4); color: #4ade80; font-size: 11px; font-weight: 700; }
.pg-soon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); }
.pg-soon li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pg-soon img { width: 64px; height: 64px; border-radius: var(--r-md); object-fit: cover; }
.pg-soon strong { display: block; color: #fff; font-size: var(--t-sm); }
.pg-soon span { display: block; color: var(--muted); font-size: var(--t-xs); line-height: 1.5; }
.pg-soon em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--amber); white-space: nowrap; }

.pg-404 { text-align: center; margin: var(--s-10) auto; max-width: 40rem; }
.pg-404 h1, .pg-404 h2 { font-family: var(--f-disp); color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: var(--s-3); }
.pg-404 .cta-row { justify-content: center; }

@media (max-width: 1100px) { .pg-links a { padding-inline: .55rem; } }
@media (max-width: 860px) {
  .pg-nav { flex-wrap: wrap; row-gap: var(--s-2); }
  .pg-links { order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .pg-links::-webkit-scrollbar { display: none; }
  .pg { padding: var(--s-6) var(--s-4) var(--s-12); }
  .pg-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .pg-shot { max-width: 420px; }
  .pg-hero .cta-row .btn { width: 100%; justify-content: center; }
  .pg-sec { scroll-margin-top: 140px; }
  .pg-soon { grid-template-columns: minmax(0, 1fr); }
  /* tableau des paramètres : une carte par réglage (libellé + valeur, puis rôle en dessous) */
  .pg-params thead { display: none; }
  .pg-params, .pg-params tbody { display: block; }
  .pg-params tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem var(--s-3); padding: .75rem var(--s-4); border-bottom: 1px solid var(--line-2); }
  .pg-params tr:last-child { border-bottom: 0; }
  .pg-params th, .pg-params td { padding: 0; border: 0; }
  .pg-params tbody th { min-width: 0; }
  .pg-params td:last-child { grid-column: 1 / -1; font-size: var(--t-xs); }
  .pg-params td:last-child:empty { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pg-card > a { transition: none; } .pg-card > a:hover { transform: none; } }

/* =========================================================
   2. Communs aux deux thèmes (refonte du 23 septembre 2026)
   ========================================================= */
/* Titres en Satoshi (--f-disp) : interlettrage serré, lignes équilibrées ; l'espacement des mots élargi
   pour Clash Display (fin de styles.css) n'a plus lieu d'être. */
.pg-hero h1 { letter-spacing: -.04em; line-height: 1.05; word-spacing: .02em; text-wrap: balance; }
.pg-sec h2 { letter-spacing: -.03em; line-height: 1.12; word-spacing: .02em; text-wrap: balance; }
.pg-sec h3, .pg-card h3, .pg-404 :is(h1, h2) { letter-spacing: -.02em; text-wrap: balance; }
.pg-hero .lead, .pg-sec p, .pg-card p { text-wrap: pretty; }
/* chiffres alignés dans les tableaux et les valeurs */
.pg-table, .pg-facts dd { font-variant-numeric: tabular-nums; }
/* liens du menu : trait bleu qui se dessine sous le lien survolé (comme sur l'accueil) */
@media (min-width: 861px) {
  .pg-links a { position: relative; }
  .pg-links a::after {
    content: ""; position: absolute; inset-inline: .75rem; bottom: .3rem; height: 2px; border-radius: 2px;
    background: var(--accent-grad); opacity: 0; transform: scaleX(.3); transition: transform var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
  }
  .pg-links a:hover::after { opacity: 1; transform: none; }
}
/* cartes : élévation douce, ombre qui suit */
.pg-card > a { transition: transform var(--d-slow) var(--ease), border-color var(--d-base), box-shadow var(--d-slow) var(--ease); }
.pg-card-cta { transition: color var(--d-fast); }
/* carte « À lire aussi » : toute la carte est cliquable */
.pg-related li { position: relative; }
.pg-sec .pg-related a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* =========================================================
   3. THÈME CLAIR (défaut) : blanc, encre marine, bleu #2563eb
   ========================================================= */
/* fond : halo bleu très léger en haut de page, blanc ensuite */
html:not([data-theme="dark"]) .pg-body {
  background:
    radial-gradient(1100px 560px at 88% -160px, rgba(37,99,235,.11), transparent 62%),
    radial-gradient(900px 520px at -10% -80px, rgba(14,165,233,.07), transparent 60%),
    linear-gradient(180deg, #f6f9ff 0, #fff 720px) #fff;
  background-repeat: no-repeat;
}

/* ---------- Navigation des pages ---------- */
html:not([data-theme="dark"]) .pg-links a { color: var(--ink-2); }
html:not([data-theme="dark"]) .pg-links a:hover { background: rgba(37,99,235,.06); color: var(--ink); }

/* ---------- Fil d'Ariane : pastille de verre (au-dessus de la grille de l'en-tête) ---------- */
html:not([data-theme="dark"]) .crumbs { position: relative; z-index: 1; }
html:not([data-theme="dark"]) .crumbs ol {
  display: inline-flex; gap: .45rem; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: var(--r-full);
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(10,22,40,.04); font-size: var(--t-xs); font-weight: 500;
}
html:not([data-theme="dark"]) .crumbs li + li::before { margin-inline-end: .45rem; color: var(--muted-2); opacity: 1; }
html:not([data-theme="dark"]) .crumbs a { color: var(--muted); text-decoration: none; transition: color var(--d-fast); }
html:not([data-theme="dark"]) .crumbs a:hover { color: var(--blue-600); }
html:not([data-theme="dark"]) .crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- En-tête de page : grille fine en fondu, titre à l'encre marine ---------- */
html:not([data-theme="dark"]) .pg-hero { position: relative; isolation: isolate; }
html:not([data-theme="dark"]) .pg-hero::before {
  content: ""; position: absolute; z-index: -1; inset: -4.5rem calc(-1 * var(--s-4)) -2.5rem; pointer-events: none;
  background-image: linear-gradient(rgba(10,22,40,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,22,40,.05) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 58% 72% at 62% 38%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 58% 72% at 62% 38%, #000 10%, transparent 72%);
}
/* (texte découpé dans le dégradé : un peu de marge interne pour ne rogner ni accents ni jambages) */
html:not([data-theme="dark"]) .pg-hero h1 {
  color: var(--ink); padding-block: .08em .14em; margin-block: -.08em calc(var(--s-5) - .14em);
  background: linear-gradient(180deg, #0a1628 35%, #1b3a7a 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html:not([data-theme="dark"]) .pg-hero .lead { color: var(--ink-2); }
html:not([data-theme="dark"]) .pg-hero .fine { color: var(--muted); }

/* capture de l'indicateur : cadre blanc en verre, ombre bleutée profonde, légère perspective */
html:not([data-theme="dark"]) .pg-shot {
  padding: 8px; border-radius: 28px; overflow: visible; border: 1px solid rgba(10,22,40,.08);
  background: linear-gradient(180deg, #fff, #f3f7fe);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(10,22,40,.05), 0 24px 48px -22px rgba(15,40,90,.3), 0 60px 120px -48px rgba(37,99,235,.45);
}
html:not([data-theme="dark"]) .pg-shot img { border-radius: 20px; }
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html:not([data-theme="dark"]) .pg-shot { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
  html:not([data-theme="dark"])[dir="rtl"] .pg-shot { transform: perspective(1400px) rotateY(5deg) rotateX(2deg); }
  html:not([data-theme="dark"]) .pg-shot:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
}

/* ---------- Fiche technique : une seule barre de chiffres clés, séparateurs fins ---------- */
html:not([data-theme="dark"]) .pg-facts {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; overflow: hidden;
  background: rgba(10,22,40,.07); border: 1px solid rgba(10,22,40,.08); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(10,22,40,.04), 0 18px 40px -24px rgba(15,40,90,.22);
}
html:not([data-theme="dark"]) .pg-facts div { background: #fff; border: 0; border-radius: 0; padding: var(--s-5) var(--s-5) var(--s-4); }
html:not([data-theme="dark"]) .pg-facts dt { display: flex; align-items: center; gap: .45rem; color: var(--muted); letter-spacing: .09em; }
html:not([data-theme="dark"]) .pg-facts dt::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
html:not([data-theme="dark"]) .pg-facts dd { color: var(--ink); font-weight: 700; font-size: var(--t-base); letter-spacing: -.01em; margin-top: .45rem; }

/* ---------- Sections : titre à l'encre précédé d'un trait bleu ---------- */
html:not([data-theme="dark"]) .pg-sec h2 { color: var(--ink); }
html:not([data-theme="dark"]) .pg-sec:not(.pg-404) > h2::before {
  content: ""; display: block; width: 32px; height: 3px; border-radius: 3px; margin-bottom: var(--s-4); background: var(--accent-grad);
}
html:not([data-theme="dark"]) .pg-sec h3 { color: var(--ink); }
html:not([data-theme="dark"]) .pg-sec p { color: var(--ink-2); }
html:not([data-theme="dark"]) .pg-sec code { background: var(--blue-50); color: var(--blue-800); box-shadow: inset 0 0 0 1px var(--blue-100); }
html:not([data-theme="dark"]) .pg-sec a:not(.btn) { color: var(--blue-600); text-decoration-color: rgba(37,99,235,.35); transition: text-decoration-color var(--d-fast); }
html:not([data-theme="dark"]) .pg-sec a:not(.btn):hover { text-decoration-color: currentColor; }

/* ---------- Étapes : cartes blanches, numéros en pastille bleue ---------- */
html:not([data-theme="dark"]) .pg-steps li {
  background: #fff; border-color: rgba(10,22,40,.08); box-shadow: var(--sh-sm);
  transition: border-color var(--d-base), box-shadow var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
html:not([data-theme="dark"]) .pg-steps li::before {
  background: var(--accent-grad); border: 0; color: #fff; font-family: var(--f-mono); font-weight: 700; font-size: .78rem;
  box-shadow: 0 0 0 4px rgba(37,99,235,.08), 0 6px 14px -6px rgba(37,99,235,.7);
}
html:not([data-theme="dark"]) .pg-steps strong { color: var(--ink); }
@media (hover: hover) and (min-width: 861px) {
  html:not([data-theme="dark"]) .pg-steps li:hover { transform: translateY(-2px); border-color: rgba(37,99,235,.26); box-shadow: 0 1px 2px rgba(10,22,40,.04), 0 16px 36px -20px rgba(37,99,235,.45); }
}

/* ---------- Tableaux : carte blanche, en-tête bleuté, survol de ligne ---------- */
html:not([data-theme="dark"]) .pg-table-wrap {
  background: #fff; border-color: rgba(10,22,40,.08); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(10,22,40,.04), 0 18px 40px -28px rgba(15,40,90,.25);
}
html:not([data-theme="dark"]) .pg-table thead th { background: var(--surface-2); color: var(--muted); border-bottom-color: var(--line); }
html:not([data-theme="dark"]) .pg-table tbody th { color: var(--ink); }
html:not([data-theme="dark"]) .pg-table td { color: var(--ink-2); }
html:not([data-theme="dark"]) .pg-table td.mono { color: var(--blue-600); font-weight: 600; }
html:not([data-theme="dark"]) .pg-table tbody tr { transition: background-color var(--d-fast); }
html:not([data-theme="dark"]) .pg-table tbody tr:hover { background: rgba(37,99,235,.035); }
html:not([data-theme="dark"]) .pg-table caption { color: var(--muted); border-top: 1px solid var(--line-2); }

/* ---------- À lire aussi : cartes cliquables, flèche qui avance au survol ---------- */
html:not([data-theme="dark"]) .pg-related li {
  background: #fff; border-color: rgba(10,22,40,.08); box-shadow: var(--sh-sm); padding-inline-end: calc(var(--s-4) + 1.75rem);
  transition: border-color var(--d-base), box-shadow var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
html:not([data-theme="dark"]) .pg-related li::after {
  content: "→"; position: absolute; top: var(--s-4); inset-inline-end: var(--s-4); color: var(--blue-600); font-weight: 700;
  transition: transform var(--d-base) var(--ease);
}
html:not([data-theme="dark"])[dir="rtl"] .pg-related li::after { content: "←"; }
html:not([data-theme="dark"]) .pg-sec .pg-related a { color: var(--ink); }
html:not([data-theme="dark"]) .pg-related li:hover { border-color: rgba(37,99,235,.3); box-shadow: 0 1px 2px rgba(10,22,40,.04), 0 18px 40px -22px rgba(37,99,235,.42); }
html:not([data-theme="dark"]) .pg-related li:hover a { color: var(--blue-600); }
html:not([data-theme="dark"]) .pg-related li:hover::after { transform: translateX(3px); }
html:not([data-theme="dark"])[dir="rtl"] .pg-related li:hover::after { transform: translateX(-3px); }
@media (hover: hover) and (min-width: 861px) { html:not([data-theme="dark"]) .pg-related li:hover { transform: translateY(-3px); } }

/* ---------- Avertissement de fin de page : encart discret ---------- */
html:not([data-theme="dark"]) .pg-disclaimer {
  margin-top: var(--s-8); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface-2); color: var(--muted);
}
html:not([data-theme="dark"]) .pg-disclaimer a { color: var(--blue-600); }

/* ---------- Hub : cartes d'indicateurs ---------- */
html:not([data-theme="dark"]) .pg-card > a { background: #fff; border-color: rgba(10,22,40,.08); box-shadow: 0 1px 2px rgba(10,22,40,.05), 0 12px 32px -20px rgba(15,40,90,.25); }
html:not([data-theme="dark"]) .pg-card > a:hover { border-color: rgba(37,99,235,.32); box-shadow: 0 2px 4px rgba(10,22,40,.04), 0 30px 60px -26px rgba(37,99,235,.45); }
html:not([data-theme="dark"]) .pg-card img { border-bottom-color: var(--line); }
html:not([data-theme="dark"]) .pg-card h3 { color: var(--ink); }
html:not([data-theme="dark"]) .pg-card p { color: var(--ink-2); }
html:not([data-theme="dark"]) .pg-card-cta { color: var(--blue-600); }
html:not([data-theme="dark"]) .pg-card > a:hover .pg-card-cta { color: var(--blue-800); }
html:not([data-theme="dark"]) .pg-badge {
  display: inline-flex; align-items: center; gap: .35rem; background: rgba(255,255,255,.94); border-color: rgba(15,157,106,.25); color: #047857;
  box-shadow: 0 6px 16px -6px rgba(10,22,40,.45);
}
html:not([data-theme="dark"]) .pg-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
html:not([data-theme="dark"]) .pg-soon li { background: #fff; border-color: rgba(10,22,40,.08); box-shadow: var(--sh-sm); }
html:not([data-theme="dark"]) .pg-soon img { box-shadow: 0 0 0 1px var(--line); }
html:not([data-theme="dark"]) .pg-soon strong { color: var(--ink); }
html:not([data-theme="dark"]) .pg-soon em { padding: .2rem .55rem; border-radius: var(--r-full); color: #b45309; background: rgba(245,158,11,.1); box-shadow: inset 0 0 0 1px rgba(217,119,6,.22); }

/* ---------- 404 : grand « 404 » en dégradé, une carte par langue ---------- */
html:not([data-theme="dark"]) .pg-404 {
  padding: var(--s-8) var(--s-6); border: 1px solid var(--line); border-radius: 24px; background: #fff;
  box-shadow: 0 1px 2px rgba(10,22,40,.04), 0 18px 40px -26px rgba(15,40,90,.25);
}
html:not([data-theme="dark"]) .pg-404:first-child::before {
  content: "404"; content: "404" / ""; display: block; margin-bottom: var(--s-2); font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(4.5rem, 3rem + 7vw, 8rem); line-height: 1; letter-spacing: -.06em;
  background: var(--text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html:not([data-theme="dark"]) .pg-404 :is(h1, h2) { color: var(--ink); }
html:not([data-theme="dark"]) .pg-404 p { color: var(--ink-2); }
html:not([data-theme="dark"]) .pg-404 .cta-row { margin: var(--s-5) 0 0; }
/* les autres langues : trois cartes compactes sous la carte principale */
html:not([data-theme="dark"]) .pg-art:has(> .pg-404) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); max-width: 60rem; margin: var(--s-6) auto 0;
}
html:not([data-theme="dark"]) .pg-art:has(> .pg-404) > .pg-404 { margin: 0; max-width: none; }
html:not([data-theme="dark"]) .pg-art:has(> .pg-404) > .pg-404:first-child { grid-column: 1 / -1; padding: var(--s-10) var(--s-6); }
html:not([data-theme="dark"]) .pg-404 + .pg-404 { display: flex; flex-direction: column; padding: var(--s-6) var(--s-5); box-shadow: var(--sh-sm); }
html:not([data-theme="dark"]) .pg-404 + .pg-404 h2 { font-size: 1.2rem; margin-bottom: var(--s-2); }
html:not([data-theme="dark"]) .pg-404 + .pg-404 p:not(.cta-row) { font-size: var(--t-sm); }
html:not([data-theme="dark"]) .pg-404 + .pg-404 .cta-row { flex-direction: column; margin-top: auto; padding-top: var(--s-4); gap: var(--s-2); }
html:not([data-theme="dark"]) .pg-404 + .pg-404 .btn-pri { background: var(--blue-50); color: var(--blue-600); box-shadow: inset 0 0 0 1px var(--blue-100); }
html:not([data-theme="dark"]) .pg-404 + .pg-404 .btn-pri:hover { background: var(--blue-100); box-shadow: inset 0 0 0 1px var(--blue-200); }
html:not([data-theme="dark"]) .pg-404 + .pg-404 .btn-pri::after { display: none; }
html:not([data-theme="dark"]) .pg-404 + .pg-404 .btn { justify-content: center; min-height: 40px; padding: .55rem .9rem; font-size: var(--t-sm); white-space: normal; text-align: center; }

/* ---------- Pied de page ---------- */
html:not([data-theme="dark"]) .pg-foot .foot-in { border-bottom-color: var(--line); }

@media (max-width: 860px) {
  /* barre de liens qui défile : fondu au bord pour signaler la suite */
  html:not([data-theme="dark"]) .pg-links { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  html:not([data-theme="dark"])[dir="rtl"] .pg-links { -webkit-mask-image: linear-gradient(270deg, #000 86%, transparent); mask-image: linear-gradient(270deg, #000 86%, transparent); }
  /* fil d'Ariane sur une ligne : la page courante se coupe en « … » (le titre la répète juste dessous) */
  html:not([data-theme="dark"]) .crumbs ol { display: flex; flex-wrap: nowrap; max-width: 100%; width: max-content; margin-bottom: var(--s-6); }
  html:not([data-theme="dark"]) .crumbs li { flex: none; white-space: nowrap; }
  html:not([data-theme="dark"]) .crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html:not([data-theme="dark"]) .pg-hero::before { inset-inline: calc(-1 * var(--s-4)); -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 10%, transparent 72%); }
  html:not([data-theme="dark"]) .pg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
  html:not([data-theme="dark"]) .pg-facts div { padding: var(--s-4); }
  html:not([data-theme="dark"]) .pg-facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html:not([data-theme="dark"]) .pg-shot { padding: 6px; border-radius: 24px; }
  html:not([data-theme="dark"]) .pg-shot img { border-radius: 18px; }
  html:not([data-theme="dark"]) .pg-params tr { transition: none; }
  html:not([data-theme="dark"]) .pg-404 { padding: var(--s-6) var(--s-4); }
  html:not([data-theme="dark"]) .pg-art:has(> .pg-404) { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  html:not([data-theme="dark"]) .pg-art:has(> .pg-404) > .pg-404:first-child { padding: var(--s-8) var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-links a::after, .pg-related li::after { transition: none; }
  html:not([data-theme="dark"]) :is(.pg-steps li, .pg-related li):hover { transform: none; }
}