/* =====================================================================
   Global Ricardi — pages d'article du blog (18/10/2026)
   ---------------------------------------------------------------------
   Chargée par les seules pages article-<slug>.html (construire_articles.py),
   avant theme.css. Elle ne touche à rien d'autre.
   1. Corps de l'article : intertitres h2 au rythme de l'ancien blog.
   2. Schémas : MÊMES classes « .gs » que les schémas de l'accueil
      (Le cabinet.dc.html, bloc « Schémas des expertises ») — toute retouche
      du dessin des schémas de l'accueil est à reporter ici.
   3. Bloc « Notre fondateur » repris de l'accueil, bandeau de rendez-vous.
   ===================================================================== */

/* ── 1. Corps ───────────────────────────────────────────────────────── */
/* Les intertitres sont des h2 (le titre de l'article est le h1) : le
   paragraphe qui les suit garde le corps courant, au lieu du grand chapeau
   que la feuille du blog réserve aux « h2 + p » des sections. */
section [data-article-corps] h2 { margin: 42px 0 16px 0 !important; }
section:not([style*="paper"]) [data-article-corps] h2 + p:not([data-formule]) {
  font-size: 20px !important; line-height: 1.75 !important; color: var(--text-secondary) !important; }
[data-article] [data-chapeau] { text-align: left; hyphens: none; -webkit-hyphens: none; }
[data-article] [data-signature] a:hover { color: var(--accent-gold) !important; }
[data-renvoi]:hover span:last-child, [data-renvois] a:hover span:nth-child(2) { color: var(--accent-gold) !important; }
@media (max-width: 620px) {
  section:not([style*="paper"]) [data-article-corps] h2 + p:not([data-formule]) { font-size: 17.5px !important; line-height: 1.7 !important; }
  section [data-article-corps] h2 { font-size: 25px !important; margin-top: 36px !important; }
  [data-article] [data-chapeau] { font-size: 19px !important; }
  [data-article] [data-chiffres] { padding: 22px 20px !important; }
}

/* ── 2. Schémas (langage visuel des schémas de l'accueil) ───────────── */
.gs { display: block; width: 100%; height: auto; overflow: visible; margin: 22px 0 18px 0; }
.gs-cadre { max-width: 460px; }
.gs .gs-boite { fill: rgba(255,255,255,0.025); stroke: var(--border-gold); stroke-width: 1; }
.gs .gs-boite-or { fill: rgba(210,180,110,0.09); stroke: var(--accent-gold); }
.gs .gs-trait { fill: none; stroke: var(--accent-gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.gs .gs-trait-or { stroke-width: 1.8; opacity: 1; }
.gs .gs-pointe { fill: var(--accent-gold); }
.gs .gs-frontiere { stroke: var(--border-gold); stroke-width: 1; stroke-dasharray: 3 5; }
.gs .gs-filet { stroke: var(--border-subtle); stroke-width: 1; }
.gs .gs-titre { font-family: var(--font-display); font-size: 15.5px; fill: var(--text-primary); }
.gs .gs-cap { font-family: var(--font-sans); font-size: 9.5px; letter-spacing: 0.09em; fill: var(--text-tertiary); }
.gs .gs-note { font-family: var(--font-sans); font-size: 10.5px; fill: var(--text-tertiary); }
.gs .gs-num { font-family: var(--font-sans); font-size: 10px; font-weight: 600; fill: #171b22; }
.gs .gs-num-or { fill: var(--accent-gold); }
.gs .gs-chiffre { font-family: var(--font-display); font-size: 26px; fill: var(--accent-gold); }
.gs .gs-or { fill: var(--accent-gold); }
.gs .gs-mil { text-anchor: middle; }
.gs .gs-fin { text-anchor: end; }
.gs .gs-noeud { fill: var(--bg-surface); stroke: var(--accent-gold); stroke-width: 1.3; }
.gs .gs-noeud-or { fill: var(--accent-gold); }
.gs .gs-bande { fill: rgba(210,180,110,0.10); }
.gs .gs-jauge-fond { fill: rgba(255,255,255,0.06); }
.gs .gs-jauge { fill: var(--accent-gold); transform-box: fill-box; transform-origin: left center; transform: scaleX(0.92); }
.gs .gs-pastille { fill: rgba(255,255,255,0.12); }
.gs .gs-pastille-on { fill: var(--accent-gold); }
.gs .gs-barre { transform-box: fill-box; transform-origin: center bottom; }
.gs .gs-barre-or { fill: var(--accent-gold); }
.gs .gs-barre-plein { fill: #dcc48b; }
.gs .gs-barre-banque { fill: rgba(255,255,255,0.05); stroke: var(--border-gold); stroke-width: 1; stroke-dasharray: 3 3; }
.gs .gs-chiffre-fort { font-size: 34px; }
.gs .gs-flux { fill: #f1dca2; filter: drop-shadow(0 0 4px rgba(226,205,150,0.9)); offset-rotate: 0deg; opacity: 0; }

/* Apparition : les tracés se dessinent, la jauge se remplit, puis les flux circulent */
[data-reveal]:not([data-om-done]) .gs .gs-trait { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-om-done] .gs .gs-trait { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gsTrace 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.25s forwards; }
[data-reveal]:not([data-om-done]) .gs .gs-jauge { transform: scaleX(0); }
[data-om-done] .gs .gs-jauge { transform: scaleX(0); animation: gsJauge 2.2s cubic-bezier(0.19, 1, 0.22, 1) 0.6s forwards; }
[data-reveal]:not([data-om-done]) .gs .gs-barre { transform: scaleY(0); }
[data-om-done] .gs .gs-barre { transform: scaleY(0); animation: gsBarre 1.1s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
[data-om-done] .gs .gs-b1 { animation-delay: 0.3s; }
[data-om-done] .gs .gs-b2 { animation-delay: 0.75s; }
[data-om-done] .gs .gs-b3 { animation-delay: 1.3s; }
[data-om-done] .gs .gs-flux { animation-name: gsFlux; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
@keyframes gsBarre { to { transform: scaleY(1); } }
@keyframes gsTrace { to { stroke-dashoffset: 0; } }
@keyframes gsJauge { to { transform: scaleX(0.92); } }
@keyframes gsFlux { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-om-done] .gs .gs-trait, [data-reveal] .gs .gs-trait { animation: none !important; stroke-dashoffset: 0 !important; }
  [data-om-done] .gs .gs-jauge { animation: none !important; transform: scaleX(0.92) !important; }
  [data-om-done] .gs .gs-barre, [data-reveal] .gs .gs-barre { animation: none !important; transform: none !important; }
  .gs .gs-flux { display: none; }
  [data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* Compléments propres aux schémas des articles (tableaux, liens pointillés,
   éléments en retrait). Les pointillés sont immobiles : ils désignent ce
   qui est à venir ou secondaire. */
.gs .gs-boite-gris { fill: rgba(255,255,255,0.03); stroke: var(--border-subtle); }
.gs .gs-lisere { fill: none; stroke: var(--accent-gold); stroke-width: 1; }
.gs .gs-cadre-or { fill: rgba(210,180,110,0.06); stroke: var(--accent-gold); stroke-width: 1; }
.gs .gs-lien { fill: none; stroke: var(--accent-gold); stroke-width: 1.2; stroke-dasharray: 2 4; stroke-linecap: round; opacity: 0.85; }
.gs .gs-lien-gris { fill: none; stroke: var(--text-tertiary); stroke-width: 1.2; stroke-dasharray: 2 4; stroke-linecap: round; opacity: 0.75; }
.gs .gs-trait-gris { stroke: var(--text-tertiary); opacity: 0.6; }
.gs .gs-pointe-gris { fill: var(--text-tertiary); opacity: 0.8; }
.gs .gs-note-claire { fill: var(--text-secondary); }

/* Cadre d'un schéma dans l'article : gabarit de 360 unités, centré, 480 px
   au plus (le corps de texte et les légendes gardent la même proportion). */
.gs-cadre-article { max-width: 480px; margin: 0 auto; }
.gs-cadre-article .gs { margin: 22px 0 6px 0; }
[data-schema] figcaption { text-align: left; }
/* Téléphone : le schéma prend toute la colonne (sans cadre latéral) et ses
   légendes grossissent pour rester lisibles. */
@media (max-width: 620px) {
  [data-schema] { padding: 22px 0 14px 0 !important; border-left: 0 !important; border-right: 0 !important; background: transparent !important; }
  [data-schema] .gs .gs-cap { font-size: 11.25px; letter-spacing: 0; }
  [data-schema] .gs .gs-note { font-size: 12px; }
  [data-schema] .gs .gs-titre { font-size: 16.5px; }
  [data-schema] .gs .gs-num { font-size: 11.5px; }
  [data-schema] figcaption span:last-child { font-size: 20px !important; }
}
/* (19/10/2026) Écran étroit : le schéma déborde de 16 px de chaque côté de la
   colonne de texte. Sur un écran de 360 px, le gabarit de 360 unités s'affiche
   ainsi sur 352 px : légendes à 11 px réels au moins (10,2 px auparavant à
   390 px, 9,3 px à 360 px). */
@media (max-width: 520px) {
  .gs-cadre-article { max-width: none; margin: 0 -16px; }
}

/* ── 3. Bloc « Notre fondateur » (repris de l'accueil) et rendez-vous ── */
img { max-width: 100%; }
@keyframes grNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
/* La citation ne se justifie pas : en italique et en grand corps, la
   justification creuse des blancs (même règle que l'accueil). */
section p[style*="font-size: clamp(24px, 2.6vw, 34px)"] { text-align: left !important; text-wrap: balance; hyphens: none !important; -webkit-hyphens: none !important; }
@media (max-width: 1279px) {
  [style*="minmax(240px, 0.9fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="minmax(240px, 0.9fr)"] img { max-width: 320px; }
}
/* Bandeau final : une seule ligne centrée sur grand écran, retour à la
   ligne équilibré ailleurs (comme le bandeau final de l'accueil). */
@media (min-width: 1000px) { [data-relance-phrase] { white-space: nowrap; } }
@media (max-width: 999px) { [data-relance-phrase] { text-wrap: balance; } }
@media (max-width: 480px) {
  [data-cta] { white-space: normal !important; text-align: center; letter-spacing: 0.1em !important; }
  [data-relance-phrase] { font-size: 21px !important; }
}