/* Thème commun des pages publiques (29/09/2026) : la même esthétique que
   l'accueil. Voix « terminal » (IBM Plex Mono pour tout le texte), fond
   beige, aucune carte blanche, liens soulignés en orange au survol, bouton
   d'action encre ovale à effet « chitchat ». Appliqué par
   tools/apply_public_theme.py (classe body.pub + lien vers ce fichier) ;
   les styles propres à chaque page restent dans la page, ce fichier vient
   après eux et l'emporte. Pas d'emoji, pas de tiret cadratin. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }

body.pub {
  --p-bg: #f2f0eb; --p-ink: #1c1917; --p-ink2: #44403c; --p-mut: #57534e;
  --p-line: #e7e5e4; --p-edge: #d6d3cc; --p-accent: #ea580c; --p-accent-d: #c2410c;
  --p-accent-dd: #9a3412;
  --p-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--p-bg); color: #292524; font-size: 15px; line-height: 1.7; }
/* Une seule voix : la Mono partout (les pages déclaraient la Sans sur des
   titres, des résumés ou des cellules ; seul !important les couvre toutes). */
body.pub, body.pub * { font-family: var(--p-mono) !important; }
body.pub h1, body.pub h2, body.pub h3 { color: var(--p-ink); letter-spacing: -.03em; }
body.pub h1 { font-weight: 600; letter-spacing: -.045em; }

/* ------- En-tête commun ------- */
body.pub > header { display: flex; align-items: center; justify-content: space-between;
  gap: .6rem 1rem; flex-wrap: wrap; margin: 0; padding: .8rem 1.2rem;
  border-bottom: 1px solid var(--p-line); background: transparent; }
body.pub .brand { font-size: 1.15rem; font-weight: 700; color: var(--p-ink);
  letter-spacing: -.03em; text-decoration: none; }
body.pub .brand span { color: var(--p-accent); }
body.pub > header nav { display: flex; gap: .5rem .9rem; flex-wrap: wrap;
  align-items: center; justify-content: flex-end; }
body.pub > header nav .auth { display: flex; gap: .9rem; align-items: center; }
body.pub > header nav a { border: none; border-radius: 0; padding: .3rem 0;
  font-size: .85rem; font-weight: 500; min-height: 0; }
body.pub > header nav a.lang { font-size: .75rem; }
body.pub > header nav a.signup { font-weight: 600; }
@media (max-width: 639px) {
  body.pub > header nav { gap: .4rem .75rem; }
  body.pub > header nav a.quiet { font-size: .78rem; }
}

/* ------- Liens : texte rempli d'orange de gauche à droite, trait dessous
   (même effet que les liens de l'accueil). ------- */
body.pub > header nav a, body.pub > footer a {
  --sw-c: var(--p-mut); --sw-h: var(--p-accent-d);
  position: relative; display: inline-block; text-decoration: none;
  color: transparent; background: linear-gradient(to right, var(--sw-h) 50%, var(--sw-c) 50%);
  background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  transition: background-position .3s ease-out; }
body.pub > header nav a.signup { --sw-c: var(--p-ink); }
body.pub > header nav a::after, body.pub > footer a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px;
  background: var(--sw-h); transition: width .3s ease-out; }
body.pub > header nav a:hover, body.pub > header nav a:focus-visible,
body.pub > footer a:hover, body.pub > footer a:focus-visible { background-position: 0 0; }
/* Les pages qui embarquent la feuille de l'accueil y trouvent un fond orange
   plein au survol de Connexion / S'inscrire : on redéclare l'effet complet. */
body.pub > header nav a.signin:hover, body.pub > header nav a.signup:hover,
body.pub > header nav a.signin:focus-visible, body.pub > header nav a.signup:focus-visible {
  color: transparent; border: none;
  background: linear-gradient(to right, var(--sw-h) 50%, var(--sw-c) 50%);
  background-size: 200% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; }
body.pub > header nav a:hover::after, body.pub > header nav a:focus-visible::after,
body.pub > footer a:hover::after, body.pub > footer a:focus-visible::after { width: 100%; }
body.pub a:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 3px; }
/* Liens du contenu : orange foncé souligné, jamais un fond. */
body.pub main a:not(.ui-btn):not(.example-card):not(.skip-link) { color: var(--p-accent-dd);
  text-underline-offset: 3px; }

/* ------- Pied de page commun ------- */
body.pub > footer { max-width: 68rem; margin: 0 auto; padding: 1.6rem 1.5rem;
  border-top: 1px solid var(--p-line); color: var(--p-mut); font-size: .78rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between;
  background: transparent; }

/* ------- Aucune carte blanche : fond transparent, filet beige foncé ------- */
body.pub .cta, body.pub .formula, body.pub .instrument, body.pub .tile,
body.pub .example-card, body.pub .tcard, body.pub .comparison, body.pub .case-links a,
body.pub .research-sample, body.pub .guide-related a, body.pub .visual-panel,
body.pub .payoff-panel, body.pub .term-panel, body.pub .chip, body.pub .btn.ghost,
body.pub .guide-body .formula, body.pub .example, body.pub.case-study .verdict, body.pub.case-study .chart,
body.pub.case-study .case-context, body.pub.case-study .case-cta,
body.pub.case-study .event-leg {
  background: transparent; box-shadow: none; }
body.pub .cta, body.pub .formula, body.pub .instrument, body.pub .tile,
body.pub .example-card, body.pub .tcard, body.pub .comparison, body.pub .case-links a,
body.pub .guide-related a, body.pub .visual-panel, body.pub .payoff-panel,
body.pub .term-panel, body.pub.case-study .chart, body.pub.case-study .case-cta,
body.pub.case-study .event-leg { border-color: var(--p-edge); }
body.pub .example-card:hover, body.pub .case-links a:hover, body.pub .guide-related a:hover,
body.pub .tile:hover { box-shadow: none; transform: none; border-color: var(--p-mut); }
body.pub .skip-link { background: var(--p-bg); }
body.pub .faq summary:hover, body.pub .faq summary:focus-visible { background: transparent; }
/* Titres de section : encre (l'orange est réservé aux actions). */
body.pub main h2 { color: var(--p-ink); }

/* ------- Bouton d'action : encre, ovale, « chitchat » au survol ------- */
body.pub .ui-btn { --btn-bg: #1c1917; --btn-hover-bg: #292524; --btn-color: #f2f0eb;
  --btn-hover-color: #f97316;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border: none; border-radius: 999px; overflow: hidden;
  color: var(--btn-color); background: var(--btn-bg); text-decoration: none;
  font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer;
  transition: background-color .3s; box-shadow: 0 2px 10px 0 rgba(0,0,0,.137);
  transform: none; }
body.pub .ui-btn span { position: relative; letter-spacing: .08rem; background: inherit;
  color: inherit; transition: color .3s; }
body.pub .ui-btn span::before { position: absolute; content: ""; background: inherit; }
body.pub .ui-btn:hover, body.pub .ui-btn:focus-visible { background: var(--btn-hover-bg);
  color: var(--btn-color); border: none; transform: none; box-shadow: 0 2px 10px 0 rgba(0,0,0,.137); }
body.pub .ui-btn:hover span, body.pub .ui-btn:focus-visible span { color: var(--btn-hover-color); }
body.pub .ui-btn:hover span::before, body.pub .ui-btn:focus-visible span::before {
  animation: pub-chitchat linear both 1.2s; }
@keyframes pub-chitchat {
  0% { content: "#"; } 5% { content: "."; } 10% { content: "^{"; } 15% { content: "-!"; }
  20% { content: "#$_"; } 25% { content: "№:0"; } 30% { content: "#{+."; }
  35% { content: "@}-?"; } 40% { content: "?{4@%"; } 45% { content: "=.,^!"; }
  50% { content: "?2@%"; } 55% { content: "\;1}]"; }
  60% { content: "?{%:%"; right: 0; } 65% { content: "|{f[4"; right: 0; }
  70% { content: "{4%0%"; right: 0; } 75% { content: "'1_0<"; right: 0; }
  80% { content: "{0%"; right: 0; } 85% { content: "]>'"; right: 0; }
  90% { content: "4"; right: 0; } 95% { content: "2"; right: 0; }
  100% { content: ""; right: 0; } }

@media (prefers-reduced-motion: reduce) {
  body.pub > header nav a, body.pub > footer a,
  body.pub > header nav a::after, body.pub > footer a::after { transition: none; }
  body.pub .ui-btn:hover span::before, body.pub .ui-btn:focus-visible span::before { animation: none; }
}