/* Vitrine ALLIAGE CAPITAL.
   Identite metallurgique : un alliage de strategies. Neutres acier froids,
   accent bronze « metal en fusion ». Trois voix typographiques systeme —
   serif narratif, sans systematique, mono pour les donnees — sans police
   tierce (CSP stricte). Le graphe s'ouvre au clic via <details> : aucun
   JavaScript. Theme clair unique, assume, peint explicitement. */

:root {
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --ground: #f4f4f1;       /* fond, blanc casse « metal brosse » */
  --surface: #ffffff;      /* cartes, zone depliee */
  --ink: #17191e;          /* texte principal, presque noir froid */
  --steel: #565e69;        /* texte secondaire, acier */
  --steel-2: #8a9099;      /* legendes, axes */
  --line: #e4e3dd;         /* filets */
  --accent: #9c5a2b;       /* bronze en fusion — identite ALLIAGE */
  --accent-soft: #f1e9df;  /* fond bronze tres dilue */
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Filet de marque en tete de page — le nom, discret, en petites capitales. */
.marque {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--steel);
  text-transform: uppercase;
  padding: 1.6rem 2rem;
  border-bottom: 1px solid var(--line);
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* -- Hero ----------------------------------------------------------------- */

.hero { padding: 5.5rem 0 1rem; }

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 1.2rem 0 0;
  text-wrap: balance;
}

.lead {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--steel);
  max-width: 34ch;
  margin: 1.6rem 0 0;
}

/* Motif : trois brins qui fusionnent en une ligne bronze. */
.motif { display: block; width: 100%; height: auto; margin: 3rem 0 0; }
.motif .brin { fill: none; stroke: var(--steel-2); stroke-width: 1.4; }
.motif .brin-1 { stroke-dasharray: 2 5; }          /* systematique : pointille */
.motif .brin-3 { stroke: #8a9099; }                /* automatise : marches */
.motif .fusion { fill: none; stroke: var(--accent); stroke-width: 3; }
.motif .noeud { fill: var(--accent); }

/* -- Approche ------------------------------------------------------------- */

.approche {
  margin: 4.5rem 0 0;
  padding-top: 3.5rem;
  border-top: 1px solid var(--line);
}

.intro {
  font-size: 1.05rem;
  color: var(--ink);
  max-width: 58ch;
  margin: 0;
}

.piliers {
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Filet fin plutot que trois grosses barres bronze : plus sobre. L'accent
   passe sur l'etiquette de categorie, qui porte alors une petite marque. */
.piliers article {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Petite marque bronze devant l'etiquette : un tiret court, pas une pastille. */
.tag::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.piliers h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0.5rem 0 0.7rem;
  letter-spacing: -0.01em;
}

.piliers p:last-child {
  font-size: 0.92rem;
  color: var(--steel);
  margin: 0;
}

.these {
  margin: 3.5rem 0 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 46ch;
}

/* -- Bloc performance (repliable) ---------------------------------------- */

.perf { margin: 4.5rem 0 0; }

details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

details[open] { border-color: #d6d5cd; }

summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  user-select: none;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--steel-2);
}
details[open] summary::after { content: "\2212"; }
summary:hover { background: var(--accent-soft); }
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.contenu-perf {
  padding: 0.4rem 1.5rem 1.6rem;
  border-top: 1px solid var(--line);
}

.perf-note {
  font-size: 0.85rem;
  color: var(--steel);
  margin: 1rem 0 0;
}

/* Bascule de devise, sans JavaScript. */
.bascule input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bascule {
  padding-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.bascule label {
  padding: 0.24rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--steel);
  cursor: pointer;
  transition: all 0.12s ease;
}
.bascule input:checked + label {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.bascule input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.graphe { display: none; width: 100%; margin-top: 1rem; }
#d-eur:checked ~ .g-eur { display: block; }
#d-usd:checked ~ .g-usd { display: block; }
svg.motif, .graphe svg { width: 100%; height: auto; }

/* Elements internes du graphe (classes posees par chart.py). */
.ref { stroke: var(--line); stroke-dasharray: 3 4; }
.tick, .pied { fill: var(--steel-2); font-size: 11px; font-family: var(--mono); }
.fin { font-size: 11px; font-weight: 600; font-family: var(--mono); }

/* Legende. */
.legende {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--steel);
}
.puce { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 0.45rem; vertical-align: middle; }
/* A tenir en phase avec le dict COULEURS de chart.py. */
.puce-alliage { background: #9c5a2b; }
.puce-ndx { background: #5c6470; }
.puce-spx { background: #a8a29e; }
.puce-cac { background: #3f6f5f; }

/* -- Repartition sectorielle ---------------------------------------------- */

/* Meme boitier repliable que la performance : le visiteur ouvre s'il veut.
   Les couleurs des barres sont posees par chart.py en attribut `fill`, comme
   `stroke` sur les polylignes du graphe — la CSP interdit `style="..."`,
   pas les attributs de presentation SVG. */
.secteurs { margin: 1.5rem 0 0; }
.graphe-secteurs { width: 100%; margin-top: 1rem; }
.graphe-secteurs svg { width: 100%; height: auto; }
.secteur-nom { fill: var(--ink); font-size: 12px; font-family: var(--sans); }
.secteur-part {
  fill: var(--steel);
  font-size: 12px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* -- Pied ----------------------------------------------------------------- */

footer {
  margin-top: 5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.mention { font-size: 0.72rem; color: var(--steel-2); line-height: 1.7; max-width: 60ch; margin: 0; }
.acces { margin: 1.4rem 0 0; }
.acces a {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.acces a:hover { color: var(--accent); border-color: var(--accent); }

/* -- Adaptation etroite --------------------------------------------------- */

@media (max-width: 640px) {
  .marque { padding: 1.2rem 1.3rem; }
  main { padding: 0 1.3rem 3rem; }
  .hero { padding: 3.5rem 0 0.5rem; }
  .piliers { grid-template-columns: 1fr; gap: 1.8rem; }

  /* Texte des SVG : lisible sur telephone, sans une ligne de JavaScript.

     Les deux graphes ont une viewBox de 720 unites, rendue dans environ
     300 px sur un ecran de 375 px : le facteur d'echelle est de ~0,42, et un
     texte declare a 11 ou 12 px arrivait a l'oeil a 4,7 px. Illisible.

     Une viewBox ne se change pas en CSS, et la vitrine doit rester compatible
     avec `script-src 'none'` : la seule prise est la taille de police, qui
     s'exprime dans les unites de la viewBox. On la remonte donc d'un facteur
     ~2 pour retrouver ~9-10 px reels. Les marges de chart.py (MARGE_G,
     MARGE_D, MARGE_SECT_H) sont dimensionnees pour ces valeurs-ci : le SVG
     racine rogne ce qui deborde de sa viewBox, un texte agrandi sans marge
     serait coupe. Les deux fichiers se tiennent, ne changer l'un qu'en
     regardant l'autre.

     Le contenu deplie perd aussi un peu de son rembourrage lateral : chaque
     pixel rendu au graphe est un pixel de texte gagne. */
  .contenu-perf { padding-left: 0.9rem; padding-right: 0.9rem; }

  .tick { font-size: 21px; }          /* « 100 », tient dans MARGE_G = 56 */
  .fin { font-size: 22px; }           /* valeurs de fin, dans MARGE_D = 88 */
  .pied { font-size: 23px; }
  .secteur-nom, .secteur-part { font-size: 24px; }
}