/* Le point éco de Ludo — reprend la direction « lumière » du dashboard de
   Dimitri (jetons de `dashboard/public/lumiere.css`, socle Apple de
   claudo/infra) : fond teinté, une lueur colorée en tête, cartes blanches à
   grands rayons, Inter, pastilles de couleur. Le sombre suit le système. */

:root {
  --fond: #F3F4F8; --carte: #FFFFFF; --carte-2: #F7F8FA;
  --texte: #0B0C10; --texte-2: rgba(40,44,58,.66); --texte-3: rgba(40,44,58,.40);
  --trait: rgba(20,24,40,.08); --trait-2: rgba(20,24,40,.14); --remplissage: rgba(118,122,140,.13);
  --ombre-1: 0 1px 1px rgba(16,20,36,.04), 0 2px 6px rgba(16,20,36,.04);
  --ombre-2: 0 1px 2px rgba(16,20,36,.05), 0 10px 30px -8px rgba(16,20,36,.12);
  --bleu: #007AFF; --vert: #1F9D6B; --rouge: #E5372B; --orange: #F08A00; --jaune: #E0A100;
  --indigo: #5856D6; --violet: #AF52DE; --sarcelle: #1FA2BA; --menthe: #00A89F; --rose: #FF2D55;
  --accent: var(--indigo);
  --lueur-1: rgba(88,86,214,.20); --lueur-2: rgba(0,122,255,.14); --lueur-3: rgba(31,157,107,.10);
  --hero-fond: linear-gradient(135deg, #EEF0FF 0%, #E6F0FF 55%, #E7F7F1 100%); --hero-encre: #14123A;
  --pour-vous: rgba(88,86,214,.08);
  --rayon: 14px; --rayon-carte: 22px;
  --police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --courbe: cubic-bezier(.2,.8,.2,1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0E1017; --carte: #181B24; --carte-2: #1F2330;
    --texte: #F4F5F9; --texte-2: rgba(226,230,242,.66); --texte-3: rgba(226,230,242,.38);
    --trait: rgba(255,255,255,.07); --trait-2: rgba(255,255,255,.13); --remplissage: rgba(150,156,180,.16);
    --ombre-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.3);
    --ombre-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -10px rgba(0,0,0,.6);
    --bleu: #0A84FF; --vert: #30C487; --rouge: #FF5A4F; --orange: #FF9F0A; --jaune: #FFC933;
    --indigo: #8B89FF; --violet: #BF5AF2; --sarcelle: #40C8E0; --menthe: #47DDD3; --rose: #FF375F;
    --lueur-1: rgba(125,122,255,.22); --lueur-2: rgba(10,132,255,.14); --lueur-3: rgba(42,168,118,.10);
    --hero-fond: linear-gradient(135deg, #1D1B3D 0%, #15233E 55%, #132A26 100%); --hero-encre: #EEF0FF;
    --pour-vous: rgba(139,137,255,.12);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 400 15px/1.5 var(--police); font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.ic { width: 18px; height: 18px; flex: none; fill: currentColor; }
.ic-petit { width: 12px; height: 12px; opacity: .6; }
[hidden] { display: none !important; }

/* ---------- Barre du haut, en verre */
.barre {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 10px max(16px, calc((100vw - 1180px) / 2)); padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--fond) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--trait);
}
.marque { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 var(--police); text-decoration: none; letter-spacing: -.2px; }
.marque-icone {
  width: 30px; height: 30px; padding: 6px; border-radius: 8px; fill: #fff;
  background: linear-gradient(160deg, #7A78F0, #4B48C7);
}
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 6px 12px; border-radius: 999px; font: 500 14px/1.2 var(--police); color: var(--texte-2); text-decoration: none; }
.nav a:hover { background: var(--remplissage); color: var(--texte); }
.barre form { margin: 0; }
.bouton-discret {
  display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; background: var(--remplissage); color: var(--texte-2);
  font: 500 13px/1.2 var(--police);
}
.bouton-discret:hover { color: var(--texte); }
.bouton-discret .ic { width: 15px; height: 15px; }

/* ---------- Page */
.page { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 20px; }
.carte { background: var(--carte); border-radius: var(--rayon-carte); box-shadow: var(--ombre-2); padding: 22px 24px; min-width: 0; }
.section-titre { display: flex; align-items: center; gap: 8px; font: 700 19px/1.25 var(--police); letter-spacing: -.2px; margin-bottom: 14px; }
.section-titre .ic { width: 20px; height: 20px; color: var(--accent); }
.section-sous { color: var(--texte-2); margin: -6px 0 16px; }

/* ---------- En-tête du jour */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; padding: 32px 32px 28px; color: var(--hero-encre);
  background: var(--hero-fond); box-shadow: var(--ombre-2);
}
.lueur {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 90% at 85% 0%, var(--lueur-1), transparent 70%), radial-gradient(50% 80% at 100% 70%, var(--lueur-2), transparent 70%), radial-gradient(45% 70% at 60% 110%, var(--lueur-3), transparent 70%);
}
.surtitre { font: 600 13px/1.3 var(--police); letter-spacing: .2px; opacity: .7; }
.hero-titre { font: 800 clamp(30px, 5vw, 42px)/1.08 var(--police); letter-spacing: -1px; margin: 8px 0 14px; }
.hero-fait { font: 650 clamp(18px, 2.4vw, 22px)/1.3 var(--police); letter-spacing: -.3px; max-width: 46ch; }
.hero-bref { font: 400 16.5px/1.6 var(--police); margin-top: 10px; max-width: 72ch; opacity: .92; }
.hero-meta { display: flex; align-items: center; gap: 6px; margin-top: 16px; font: 500 12.5px/1.4 var(--police); opacity: .62; }
.hero-meta .ic { width: 14px; height: 14px; }
.nouvelle { margin-top: 14px; }
.nouvelle a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 14px/1.2 var(--police); text-decoration: none; }

/* ---------- Marchés */
.marches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; }
.cotes-groupe { min-width: 0; }
.cotes-titre { font: 600 12px/1.2 var(--police); text-transform: uppercase; letter-spacing: .6px; color: var(--texte-3); margin-bottom: 8px; }
.cotes { display: grid; gap: 8px; }
.cote {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom var" "valeur quand";
  align-items: baseline; gap: 2px 8px; padding: 10px 12px; border-radius: var(--rayon); background: var(--carte-2);
}
.cote-nom { grid-area: nom; font: 500 13px/1.3 var(--police); color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cote-valeur { grid-area: valeur; font: 700 17px/1.2 var(--police); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.cote-var { grid-area: var; font: 600 12.5px/1.3 var(--police); font-variant-numeric: tabular-nums; color: var(--texte-2); text-align: right; }
.cote-var.est-hausse { color: var(--vert); }
.cote-var.est-baisse { color: var(--rouge); }
.cote-quand { grid-area: quand; font: 400 11.5px/1.2 var(--police); color: var(--texte-3); text-align: right; white-space: nowrap; }
.cote.est-vide { opacity: .5; }

/* ---------- Colonnes : l'essentiel + la colonne d'à côté */
.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.colonne-cote { display: grid; gap: 20px; position: sticky; top: 76px; }

.points { list-style: none; margin: 0; padding: 0; display: grid; }
.point { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 18px 0; }
.point + .point { border-top: .5px solid var(--trait-2); }
.point:first-child { padding-top: 4px; }
.point-num {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px/1 var(--police); color: var(--accent); background: var(--pour-vous);
}
.theme { display: inline-block; font: 600 11.5px/1.2 var(--police); letter-spacing: .3px; padding: 3px 8px; border-radius: 999px; color: var(--t, var(--accent)); background: color-mix(in srgb, var(--t, var(--accent)) 12%, transparent); }
.theme-taux-et-banques-centrales { --t: var(--indigo); }
.theme-marches { --t: var(--bleu); }
.theme-conjoncture { --t: var(--sarcelle); }
.theme-entreprises { --t: var(--vert); }
.theme-banque-et-reglementation { --t: var(--violet); }
.theme-international { --t: var(--orange); }
.theme-energie-et-matieres { --t: var(--jaune); }
.point-titre { font: 650 17px/1.35 var(--police); letter-spacing: -.2px; margin: 8px 0 6px; }
.point-resume { color: var(--texte); opacity: .86; }
.point-pourquoi { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--pour-vous); font-size: 14px; }
.point-pourquoi b { color: var(--accent); font-weight: 650; margin-right: 4px; }
.point-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.point-sources a {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--remplissage); font: 500 12.5px/1.3 var(--police); color: var(--texte-2); text-decoration: none;
}
.point-sources a:hover { color: var(--texte); }

.a-lire { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.a-lire a { display: grid; gap: 2px; text-decoration: none; }
.a-lire-titre { font: 600 15px/1.35 var(--police); }
.a-lire a:hover .a-lire-titre { color: var(--accent); }
.a-lire-source { font: 500 12px/1.3 var(--police); color: var(--texte-3); }
.a-lire p { font-size: 13.5px; color: var(--texte-2); margin-top: 4px; }
.carte-client { background: linear-gradient(160deg, color-mix(in srgb, var(--vert) 10%, var(--carte)), var(--carte)); }
.carte-client .section-titre .ic { color: var(--vert); }
.surveiller { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--texte); }
.surveiller li::marker { color: var(--accent); }
.carte-livre .section-titre .ic { color: var(--orange); }
.livre-titre { font: 650 16px/1.35 var(--police); }
.livre-auteur { font: 500 13px/1.4 var(--police); color: var(--texte-2); margin-top: 2px; }
.livre-pourquoi { font-size: 14px; margin-top: 8px; color: var(--texte); opacity: .86; }
.lien-discret { display: inline-block; margin-top: 12px; font: 600 13.5px/1.2 var(--police); color: var(--accent); text-decoration: none; }

/* ---------- Le fil */
.fil-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.fil-tete .section-titre { margin: 0; }
.segments { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--remplissage); }
.segment { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: 500 13px/1.2 var(--police); color: var(--texte); cursor: pointer; }
.segment[aria-pressed="true"] { background: var(--carte); box-shadow: var(--ombre-1); font-weight: 600; }
.fil { list-style: none; margin: 8px 0 0; padding: 0; columns: 2; column-gap: 32px; }
.fil-ligne { break-inside: avoid; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 10px; padding: 9px 0; border-bottom: .5px solid var(--trait); }
.fil-heure { grid-row: span 2; font: 600 12.5px/1.45 var(--police); color: var(--texte-3); font-variant-numeric: tabular-nums; }
.fil-titre { font: 500 14.5px/1.4 var(--police); text-decoration: none; }
.fil-titre:hover { color: var(--accent); }
.fil-source { font: 500 12px/1.3 var(--police); color: var(--texte-3); margin-top: 2px; }
.fil-pied { margin-top: 12px; font-size: 12.5px; color: var(--texte-3); }

/* ---------- Archives */
.archives .section-titre { font-size: 15px; color: var(--texte-2); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { padding: 6px 12px; border-radius: 999px; background: var(--carte); box-shadow: var(--ombre-1); font: 500 13px/1.2 var(--police); text-decoration: none; color: var(--texte-2); }
.puce.est-active { background: var(--accent); color: #fff; }

/* ---------- Bibliothèque */
.biblio-theme { font: 600 12px/1.2 var(--police); text-transform: uppercase; letter-spacing: .6px; color: var(--texte-3); margin: 18px 0 10px; }
.livres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.livre { padding: 14px 16px; border-radius: var(--rayon); background: var(--carte-2); }
.livre .livre-titre { font-size: 15px; }
.livre .livre-pourquoi { font-size: 13.5px; color: var(--texte-2); opacity: 1; }

/* ---------- Pied : sources */
.pied { padding: 8px 8px 0; color: var(--texte-2); }
.pied .section-titre { font-size: 15px; color: var(--texte-2); }
.sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.sources h3 { font: 600 12px/1.2 var(--police); text-transform: uppercase; letter-spacing: .6px; color: var(--texte-3); margin-bottom: 6px; }
.sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13.5px; }
.sources a { text-decoration: none; color: var(--texte); }
.sources a:hover { color: var(--accent); }
.avertissement { margin-top: 20px; font-size: 12.5px; color: var(--texte-3); max-width: 90ch; }

/* ---------- Connexion */
.page-connexion { min-height: 100dvh; }
.connexion { position: relative; overflow: hidden; isolation: isolate; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--hero-fond); }
.connexion-carte { width: min(380px, 100%); display: grid; gap: 14px; padding: 32px 28px 28px; border-radius: 28px; background: var(--carte); box-shadow: var(--ombre-2); }
.connexion-icone { width: 60px; height: 60px; padding: 14px; border-radius: 22.37%; justify-self: center; background: linear-gradient(160deg, #7A78F0, #4B48C7); box-shadow: 0 8px 20px -6px rgba(75,72,199,.5); }
.connexion-icone .ic { width: 32px; height: 32px; fill: #fff; }
.connexion-carte h1 { font: 800 26px/1.15 var(--police); letter-spacing: -.5px; text-align: center; }
.connexion-sous { text-align: center; color: var(--texte-2); margin-top: -6px; }
.connexion-erreur { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--rouge) 12%, transparent); color: var(--rouge); font: 500 14px/1.4 var(--police); }
.champ { display: grid; gap: 6px; font: 500 13px/1.2 var(--police); color: var(--texte-2); }
.champ input {
  font: 400 17px/1.3 var(--police); color: var(--texte); padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--trait-2); background: var(--carte-2); outline: none;
}
.champ input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.bouton { margin-top: 6px; border: 0; cursor: pointer; padding: 13px 16px; border-radius: 14px; background: var(--accent); color: #fff; font: 650 16px/1.2 var(--police); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Tablette et téléphone */
@media (max-width: 1040px) {
  .colonnes { grid-template-columns: minmax(0, 1fr); }
  .colonne-cote { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .nav, .masque-mobile { display: none; }
  .barre form { margin-left: auto; }
  .page { padding: 12px 12px 40px; gap: 14px; }
  .hero { padding: 24px 20px 22px; border-radius: 24px; }
  .carte { padding: 18px 16px; border-radius: 20px; }
  .colonne-cote { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .marches { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fil { columns: 1; }
  .point { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .point-num { display: none; }
  .sources { grid-template-columns: minmax(0, 1fr); }
}