@charset "UTF-8";
/* cours.css — page Cours des métaux (complète accueil.css) */

/* Six cases de cours en ligne, puis un grand graphique et la valeur du métal de quelques pièces */
.cours-page { --hausse: #6fd39b; --baisse: #f08a7a; --grille: rgba(228,228,228,0.09);
}
.cours-page .ariane ol { list-style: none; margin: 0 0 -14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--texte-doux); }
.cours-page .ariane li + li::before { content: "›"; margin-right: 6px; color: var(--marron); }
.cours-page .ariane a:hover { color: var(--creme); text-decoration: underline; }

.cours-tete h1 { margin: 0; font-size: clamp(26px, 4vw, 34px); text-wrap: balance; }
.cours-tete p { margin: 6px 0 0; color: var(--texte-doux); max-width: 65ch; }
.cours-tete strong { color: var(--texte); font-weight: 600; }
.releve { font-size: 13px; color: var(--texte-doux); margin: 6px 0 0; }

/* Graphique */
.cours-graphe { background: var(--bloc); border-right: 3px solid var(--cuivre); border-radius: var(--rayon); padding: 16px; display: grid; gap: 12px; }
.graphe-tete { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline; justify-content: space-between; }
.graphe-tete h2 { margin: 0; font-size: 20px; }
.graphe-tete h2 small { font-weight: 400; color: var(--texte-doux); font-size: 14px; margin-left: 6px; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.choix button { background: transparent; color: var(--texte); border: 1px solid var(--cuivre); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.choix button[aria-pressed="true"] { background: var(--cuivre-plein); border-color: var(--cuivre-plein); color: #2a2d2a; }
.zone { position: relative; min-width: 0; }
.zone svg { width: 100%; height: auto; display: block; }
.zone text { fill: var(--texte-doux); font-family: var(--chiffres); font-size: 11px; }
.zone .grille { stroke: var(--grille); }
.zone .base { stroke: var(--cuivre); stroke-dasharray: 4 4; }
.zone .curseur { stroke: var(--marron); stroke-dasharray: 3 3; }
.zone .point { stroke: var(--fond); stroke-width: 2; }
.bulle { position: absolute; pointer-events: none; background: var(--fond-fonce); border: 1px solid var(--cuivre); border-radius: 6px;
  padding: 6px 9px; font-size: 13px; font-family: var(--chiffres); white-space: nowrap; transform: translate(-50%, -110%); }
.bulle b { font-family: var(--police); display: block; margin-bottom: 2px; }
.bulle[hidden], .legende[hidden] { display: none; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--texte-doux); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 14px; height: 3px; border-radius: 2px; background: var(--couleur); }

/* Exemples de pièces */
.cours-pieces { display: grid; gap: 12px; }
.cours-pieces h2 { margin: 0; font-size: 20px; }
.exemples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.exemples article { background: var(--bloc); border-right: 3px solid var(--cuivre); border-radius: var(--rayon); padding: 14px; display: grid; gap: 6px; align-content: start; }
.exemples .surtitre { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--marron); }
.exemples .titre { font-weight: 600; }
.exemples dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; color: var(--texte-doux); }
.exemples dd { margin: 0; text-align: right; font-family: var(--chiffres); font-variant-numeric: tabular-nums; color: var(--texte); }
.exemples .valeur { font-family: var(--chiffres); font-size: 22px; }
.exemples .valeur small { font-family: var(--police); font-size: 13px; color: var(--texte-doux); }

@media (max-width: 700px) { .exemples { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .cours-graphe { padding: 12px 10px; }
}
.cours-graphe { scroll-margin-top: 80px; }