/* GOLDMARKET — feuille de style du thème enfant
   Conforme au brandbook web GOLDMARKET.
   Aucune valeur inventée : toute couleur, graisse et taille vient du brandbook. */

:root {
  /* Fonds et surfaces */
  --gm-fond: #FAFAF8;
  --gm-surface: #F5F0E8;
  --gm-encre: #1A1814;
  --gm-encre-surface: #221F1A;

  /* Texte */
  --gm-texte: #1A1814;
  --gm-texte-atenue: #4A4640;
  --gm-texte-secondaire: #6E695F;
  --gm-texte-sombre: #C9C4BA;
  --gm-texte-sombre-atenue: #A8A29A;

  /* Filets */
  --gm-filet: #E5DFD4;
  --gm-filet-sombre: #4A4640;

  /* Or — #C4913A ne porte JAMAIS de texte sur fond clair (2,7:1).
     Pour du texte doré sur fond clair, utiliser --gm-or-texte. */
  --gm-or: #C4913A;
  --gm-or-texte: #7A5A22;
  --gm-or-survol: #A97B2E;

  /* États */
  --gm-hausse: #2F5D3A;
  --gm-baisse: #A33A2A;
  --gm-alerte: #8A5A08;
  --gm-alerte-fond: #F0E4CC;

  /* Typographies */
  --gm-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --gm-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gm-mono: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* zéro non barré demandé — ex-DM Mono */

  /* Formes */
  --gm-rayon-champ: 2px;
  --gm-rayon-carte: 4px;
  --gm-ombre: 0 1px 2px rgba(26, 24, 20, 0.06); /* seule élévation autorisée */

  /* Grille */
  --gm-contenu: 1200px;
  --gm-gouttiere: 24px;
}

/* ---------- Polices auto-hébergées ---------- */
/* 3 septembre 2026 : fichiers canoniques de uploads/gm-fonts/, les mêmes que gm-landing-brand.php et
   gm-front-perf.php. DM Sans et Playfair Display sont des polices VARIABLES (un fichier couvre toute la plage
   de graisses) : les anciennes URL gm-cours-v2/fonts/dm-sans-400/500/700 et playfair-display-400/500 étaient
   des copies du même fichier, que Chrome téléchargeait chacune (jusqu'à cinq DM Sans sur /cours-or/). */
@font-face { font-family: "Playfair Display"; src: url("/wp-content/uploads/gm-fonts/playfair-600.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/wp-content/uploads/gm-fonts/dmsans-600.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/wp-content/uploads/gm-fonts/dmmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* ---------- Socle ---------- */
.gm-cours, .gm-cours *, .gm-cours *::before, .gm-cours *::after { box-sizing: border-box; }

main.gm-cours {
  margin: 0;
  background: var(--gm-fond);
  color: var(--gm-texte);
  font: 400 17px/1.65 var(--gm-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gm-cours a { color: var(--gm-or-texte); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.gm-cours a:hover { color: var(--gm-texte); }
.gm-cours a:focus-visible,
.gm-cours button:focus-visible,
.gm-cours input:focus-visible,
.gm-cours summary:focus-visible { outline: 2px solid var(--gm-or); outline-offset: 2px; }

.gm-wrap { max-width: var(--gm-contenu); margin: 0 auto; padding: 0 clamp(16px, 3vw, 24px); }
.gm-section { padding: clamp(36px, 5vw, 56px) 0; }
.gm-section--surface { background: var(--gm-surface); border-top: 1px solid var(--gm-filet); }
.gm-section--encre { background: var(--gm-encre); color: var(--gm-texte-sombre); }
.gm-stack { display: flex; flex-direction: column; gap: 20px; }
.gm-filet-or { height: 2px; background: var(--gm-or); border: 0; margin: 0; }

/* ---------- Typographie ---------- */
/* Échelle fluide : une seule règle pour mobile et ordinateur, sans point de rupture. */
.gm-cours h1 { margin: 0; font: 500 clamp(30px, 4.6vw, 44px)/1.15 var(--gm-titre); letter-spacing: -0.01em; text-wrap: pretty; }
.gm-cours h2 { margin: 0; font: 400 clamp(26px, 3.4vw, 34px)/1.2 var(--gm-titre); text-wrap: pretty; }
.gm-cours h3 { margin: 0; font: 700 21px/1.35 var(--gm-sans); }
.gm-cours h4 { margin: 0; font: 700 19px/1.4 var(--gm-sans); }
.gm-cours p { margin: 0; max-width: 72ch; text-wrap: pretty; }

.gm-h1 { padding-bottom: 16px; border-bottom: 3px solid var(--gm-encre); }
.gm-chapeau { font-size: clamp(17px, 2vw, 21px); line-height: 1.55; color: var(--gm-texte-atenue); }
.gm-etiquette { font: 500 13px/1.3 var(--gm-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gm-or-texte); }
.gm-section--encre .gm-etiquette { color: var(--gm-or); }
/* Audit du 10 aout 2026 : la meme correction manquait pour les cartes.
   .gm-etiquette vaut --gm-or-texte #7A5A22, soit 2,8:1 sur l'encre #1A1814,
   sous le seuil AA. Les sections l'avaient, les cartes non — alors que
   .gm-carte--encre est servie par onze mu-plugins. */
.gm-carte--encre .gm-etiquette { color: var(--gm-or); }
.gm-mention { font: 400 13px/1.6 var(--gm-sans); letter-spacing: 0.01em; color: var(--gm-texte-secondaire); }
.gm-section--encre .gm-mention { color: var(--gm-texte-sombre-atenue); }
.gm-signature { font: 400 17px/1.5 var(--gm-titre); color: var(--gm-or); }

/* Chiffres : virgule décimale, espace fine de milliers, alignement tabulaire */
.gm-nb { font-family: var(--gm-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.gm-cotation { font: 500 21px/1.3 var(--gm-mono); font-variant-numeric: tabular-nums; }
.gm-cotation--xl { font-size: clamp(32px, 4.4vw, 44px); line-height: 1.1; }
.gm-cotation--l { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; }
.gm-prix { font: 500 28px/1.2 var(--gm-mono); font-variant-numeric: tabular-nums; }
.gm-hausse { color: var(--gm-hausse); }
.gm-baisse { color: var(--gm-baisse); }
.gm-section--encre .gm-hausse, .gm-section--encre .gm-baisse { color: var(--gm-or); }

/* ---------- Bandeau de cotation ---------- */
.gm-ticker {
  background: var(--gm-encre);
  padding: 8px var(--gm-gouttiere);
  min-height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px 24px; flex-wrap: wrap;
  border-bottom: 2px solid var(--gm-or);
}
.gm-ticker__liste { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; font: 500 15px/1.6 var(--gm-mono); color: #FAFAF8; }
.gm-ticker__liste b { color: var(--gm-or); font-weight: 500; }
.gm-ticker__horodatage { font: 400 13px/1.6 var(--gm-mono); color: var(--gm-texte-sombre-atenue); }

/* ---------- Boutons ---------- */
.gm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 32px;
  border-radius: var(--gm-rayon-champ); border: 1px solid transparent;
  font: 500 17px/1 var(--gm-sans); text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
/* Bouton or : texte encre, jamais blanc */
.gm-btn--or { background: var(--gm-or); color: var(--gm-encre); }
.gm-btn--or:hover { background: var(--gm-or-survol); color: var(--gm-encre); }
.gm-btn--ligne { background: transparent; border-color: var(--gm-encre); color: var(--gm-encre); }
.gm-btn--ligne:hover { background: var(--gm-surface); color: var(--gm-encre); }
.gm-btn--clair { background: transparent; border-color: #FAFAF8; color: #FAFAF8; }
.gm-btn--clair:hover { background: var(--gm-encre-surface); color: #FAFAF8; }
.gm-btn--compact { min-height: 44px; padding: 0 20px; font-size: 15px; gap: 8px; white-space: nowrap; }
.gm-btn--icone { min-height: 44px; width: 44px; padding: 0; background: transparent; border-color: var(--gm-filet); color: var(--gm-or-texte); }
.gm-btn--icone:hover { border-color: var(--gm-encre); color: var(--gm-encre); }
.gm-btn svg { flex: 0 0 auto; }
.gm-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }

.gm-btn--partage {
  min-height: 44px; padding: 0 16px; gap: 8px; white-space: nowrap;
  background: var(--gm-fond); border-color: var(--gm-filet); color: var(--gm-texte);
  font-size: 15px;
}
.gm-btn--partage:hover { border-color: var(--gm-encre); background: var(--gm-fond); color: var(--gm-texte); }
/* Partage : un seul bouton, panneau replié par défaut. */
.gm-partage { position: relative; }
.gm-partage__bouton {
  display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  min-height: 44px; padding: 0 18px;
  background: var(--gm-fond); border: 1px solid var(--gm-filet); border-radius: var(--gm-rayon-champ);
  font: 500 15px/1 var(--gm-sans); color: var(--gm-texte); white-space: nowrap;
}
.gm-partage__bouton::-webkit-details-marker { display: none; }
.gm-partage__bouton:hover, .gm-partage[open] .gm-partage__bouton { border-color: var(--gm-encre); }
.gm-partage__panneau {
  position: absolute; top: 52px; right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 6px;
  width: max-content; min-width: 200px; padding: 12px;
  background: var(--gm-fond); border: 1px solid var(--gm-filet);
  border-top: 2px solid var(--gm-or); border-radius: var(--gm-rayon-carte);
  box-shadow: var(--gm-ombre);
}
.gm-partage__lien {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 12px; border: 0; background: transparent;
  border-radius: var(--gm-rayon-champ); cursor: pointer; text-align: left;
  font: 400 15px/1 var(--gm-sans); color: var(--gm-texte); text-decoration: none;
}
.gm-partage__lien:hover { background: var(--gm-surface); color: var(--gm-texte); }
.gm-partage__lien[data-gm-copier], button.gm-partage__lien { border-top: 1px solid var(--gm-filet); border-radius: 0; }
.gm-titre__outils { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }

/* ---------- Barre d'outils ---------- */
.gm-outils {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--gm-surface);
  border: 1px solid var(--gm-filet); border-radius: var(--gm-rayon-carte);
}
.gm-outils__champs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gm-champ { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--gm-sans); color: var(--gm-texte-atenue); }
.gm-champ input {
  min-height: 44px; padding: 0 12px;
  background: var(--gm-fond); border: 1px solid var(--gm-filet); border-radius: var(--gm-rayon-champ);
  font: 500 15px/1 var(--gm-mono); color: var(--gm-texte);
}
.gm-bascule { display: flex; border: 1px solid var(--gm-filet); border-radius: var(--gm-rayon-champ); overflow: hidden; }
.gm-bascule button {
  min-height: 44px; padding: 0 18px; border: 0; cursor: pointer;
  background: var(--gm-fond); color: var(--gm-texte-atenue);
  font: 500 15px/1 var(--gm-mono);
}
.gm-bascule button[aria-pressed="true"] { background: var(--gm-encre); color: #FAFAF8; }

/* ---------- Cartes de cotation ---------- */
.gm-grille { display: grid; gap: var(--gm-gouttiere); }
.gm-grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.gm-grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.gm-grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

.gm-carte {
  background: var(--gm-surface); border: 1px solid var(--gm-filet);
  border-radius: var(--gm-rayon-carte); padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.gm-carte--encre { background: var(--gm-encre); border-color: var(--gm-encre); color: var(--gm-texte-sombre); }
.gm-carte--encre .gm-cotation { color: #FAFAF8; }
.gm-carte--accent { background: var(--gm-fond); border-top: 2px solid var(--gm-or); }
a.gm-carte:hover, .gm-carte--cliquable:hover { box-shadow: var(--gm-ombre); }
.gm-carte__note { font: 400 15px/1.5 var(--gm-sans); color: var(--gm-texte-atenue); }
.gm-carte--encre .gm-carte__note { color: var(--gm-texte-sombre); }

.gm-grille--comprendre { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.gm-carte--pedago { background: var(--gm-fond); border-left: 3px solid var(--gm-or); gap: 14px; }
.gm-carte__entete { display: flex; align-items: center; gap: 14px; }
.gm-carte__entete h3 { text-wrap: pretty; }
.gm-carte__entete svg {
  flex: 0 0 auto; box-sizing: content-box; padding: 9px;
  border: 1px solid var(--gm-filet); border-radius: var(--gm-rayon-carte);
  background: var(--gm-fond); color: var(--gm-or-texte);
}
.gm-carte--pedago strong { font-weight: 700; color: var(--gm-texte); }

.gm-refuge {
  background: var(--gm-encre); border-radius: var(--gm-rayon-carte); padding: 32px;
  display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
}
.gm-refuge__texte { display: flex; flex-direction: column; gap: 12px; flex: 1 1 min(560px, 100%); }
.gm-refuge__texte h3 { color: #FAFAF8; font-size: 26px; line-height: 1.3; }
.gm-refuge__texte p { color: var(--gm-texte-sombre); max-width: 78ch; }
.gm-refuge__chiffre {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
  border-left: 2px solid var(--gm-or); padding-left: 32px;
}
.gm-refuge__valeur { font: 500 56px/1 var(--gm-mono); color: var(--gm-or); font-variant-numeric: tabular-nums; }
.gm-refuge .gm-mention { color: var(--gm-texte-sombre-atenue); }

/* Bande de cotations secondaires : une seule surface au lieu de trois cartes. */
.gm-bande {
  display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 16px;
  background: var(--gm-surface); border: 1px solid var(--gm-filet); border-radius: var(--gm-rayon-carte);
}
.gm-bande__item { display: flex; align-items: baseline; gap: 10px; }
.gm-faq--simple { grid-template-columns: 1fr; max-width: 900px; gap: 0; }

/* ---------- Tableaux de cotation ---------- */
.gm-tableau { border: 1px solid var(--gm-filet); border-radius: var(--gm-rayon-carte); overflow-x: auto; background: var(--gm-fond); }
.gm-tableau table { width: 100%; border-collapse: collapse; text-align: left; }
.gm-tableau--lingots table { min-width: 940px; }
.gm-tableau--pieces table { min-width: 1000px; }
.gm-tableau--fixings table { min-width: 680px; }
.gm-tableau--international table { min-width: 640px; }
.gm-seance { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.gm-seance__horaire { font: 400 12px/1.3 var(--gm-mono); letter-spacing: 0.02em; text-transform: none; color: var(--gm-texte-sombre-atenue); }
.gm-tableau--carats table { min-width: 560px; }
.gm-tableau--annees table { min-width: 460px; }
.gm-tableau caption {
  text-align: left; padding: 12px 16px;
  font: 400 13px/1.5 var(--gm-sans); color: var(--gm-texte-secondaire);
  border-bottom: 1px solid var(--gm-filet);
}
.gm-tableau thead tr { background: var(--gm-encre); }
.gm-tableau th[scope="col"] {
  padding: 12px 16px; text-align: left;
  font: 500 13px/1.3 var(--gm-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gm-or); white-space: nowrap;
}
/* Marqueur d'aide : ouvert au clic, donc utilisable au doigt comme au clavier. */
.gm-aide { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; }
.gm-aide__bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; list-style: none; cursor: pointer;
  border: 1px solid var(--gm-or); border-radius: 50%;
  font: 500 11px/1 var(--gm-sans); letter-spacing: 0; text-transform: none;
  color: var(--gm-or);
}
.gm-aide__bouton::-webkit-details-marker { display: none; }
.gm-aide__bouton:hover, .gm-aide[open] .gm-aide__bouton { background: var(--gm-or); color: var(--gm-encre); }
.gm-aide__panneau {
  /* position:fixed appliquée par le script à l'ouverture : le conteneur de
     tableau est overflow-x:auto, donc il rognerait un panneau absolu. */
  position: absolute; top: 26px; right: 0; z-index: 60; display: block;
  width: min(300px, calc(100vw - 24px)); padding: 12px 14px;
  background: var(--gm-fond); border: 1px solid var(--gm-filet);
  border-left: 3px solid var(--gm-or); border-radius: var(--gm-rayon-carte);
  box-shadow: var(--gm-ombre);
  font: 400 14px/1.5 var(--gm-sans); letter-spacing: 0; text-transform: none;
  color: var(--gm-texte); text-align: left; white-space: normal;
}
.gm-tableau th[scope="col"] { white-space: nowrap; }
.gm-tableau th.gm-col-devise { white-space: normal; }
/* Repère de défilement : visible seulement quand le tableau dépasse. */
.gm-tableau__glisser { display: none; }
@media (max-width: 1040px) { .gm-tableau__glisser { display: block; } }

.gm-tableau td, .gm-tableau th[scope="row"] { padding: 12px 16px; border-top: 1px solid var(--gm-filet); }
.gm-tableau th[scope="row"] { font: 700 17px/1.5 var(--gm-sans); text-align: left; }
.gm-tableau tbody tr:nth-child(odd) { background: var(--gm-surface); }
.gm-tableau .gm-col-nb { text-align: right; font-family: var(--gm-mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-tableau .gm-col-nb--atenue { font-weight: 400; color: var(--gm-texte-atenue); }
.gm-tableau .gm-col-action { text-align: right; padding: 8px 16px; }
.gm-tableau tfoot tr { border-top: 2px solid var(--gm-or); background: var(--gm-surface); }
.gm-tableau tfoot th, .gm-tableau tfoot td { border-top: 0; padding: 12px 16px; }

/* ---------- Document de calcul ---------- */
.gm-calcul { border: 1px solid var(--gm-filet-sombre); border-radius: var(--gm-rayon-carte); overflow: hidden; align-self: start; }
.gm-calcul__ligne { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--gm-filet-sombre); }
.gm-calcul__ligne:nth-child(even) { background: var(--gm-encre-surface); }
.gm-calcul__ligne span:first-child { font: 400 17px/1.5 var(--gm-sans); color: var(--gm-texte-sombre); }
.gm-calcul__ligne span:last-child { font: 500 17px/1.5 var(--gm-mono); color: #FAFAF8; font-variant-numeric: tabular-nums; }
.gm-calcul__total { border-top: 2px solid var(--gm-or); border-bottom: 0; }
.gm-calcul__total span:first-child { font-weight: 700; color: #FAFAF8; }
.gm-calcul__total span:last-child { font-size: 34px; line-height: 1.15; color: var(--gm-or); }
.gm-calcul__pied { padding: 16px 20px; background: var(--gm-encre-surface); border-top: 1px solid var(--gm-filet-sombre); display: flex; flex-direction: column; gap: 14px; }

/* ---------- Simulateur ---------- */
.gm-simulateur { background: var(--gm-encre); border-radius: var(--gm-rayon-carte); padding: 32px; display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.gm-simulateur label { display: flex; flex-direction: column; gap: 8px; }
.gm-simulateur label > span { font: 500 15px/1.4 var(--gm-sans); color: #FAFAF8; }
.gm-simulateur input[type="number"] {
  min-height: 48px; padding: 0 16px; width: 100%;
  background: var(--gm-encre-surface); border: 1px solid var(--gm-filet-sombre); border-radius: var(--gm-rayon-champ);
  color: #FAFAF8; font: 500 21px/1 var(--gm-mono); font-variant-numeric: tabular-nums;
}
.gm-simulateur fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gm-simulateur legend { padding: 0; font: 500 15px/1.4 var(--gm-sans); color: #FAFAF8; }
.gm-choix { display: flex; gap: 8px; flex-wrap: wrap; }
.gm-choix button {
  min-height: 44px; padding: 0 18px; cursor: pointer;
  background: transparent; border: 1px solid var(--gm-filet-sombre); border-radius: var(--gm-rayon-champ);
  color: #FAFAF8; font: 500 15px/1 var(--gm-mono);
}
.gm-choix button:hover { border-color: var(--gm-or); }
.gm-choix button[aria-pressed="true"] { background: var(--gm-or); border-color: var(--gm-or); color: var(--gm-encre); }

/* ---------- Graphique ---------- */
.gm-graphique { border: 1px solid var(--gm-filet-sombre); border-radius: var(--gm-rayon-carte); padding: 24px; background: var(--gm-encre-surface); }
.gm-graphique--clair { border-color: var(--gm-filet); background: var(--gm-fond); }
.gm-section--surface .gm-choix button { border-color: var(--gm-filet); color: var(--gm-texte); }
.gm-section--surface .gm-choix button[aria-pressed="true"] { background: var(--gm-or); border-color: var(--gm-or); color: var(--gm-encre); }
.gm-section--surface .gm-mention { color: var(--gm-texte-secondaire); }
.gm-graphique svg { display: block; width: 100%; height: auto; }

/* ---------- Sommaire, glossaire, listes ---------- */
.gm-glossaire { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 48px; }
.gm-glossaire > div { border-top: 1px solid var(--gm-filet); padding: 14px 0; }
.gm-glossaire dt { font: 700 17px/1.4 var(--gm-sans); }
.gm-glossaire dd { margin: 6px 0 0; color: var(--gm-texte-atenue); text-wrap: pretty; }

.gm-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.gm-liste li { border-top: 1px solid var(--gm-filet); padding: 12px 0; color: var(--gm-texte-atenue); }
.gm-liste li:last-child { border-bottom: 1px solid var(--gm-filet); }
.gm-liste strong { font-weight: 700; color: var(--gm-texte); }

.gm-tableau--poids table { min-width: 520px; }

/* ---------- Fenêtre d'alerte ---------- */
.gm-modale {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; background: rgba(26, 24, 20, 0.55);
}
.gm-modale[hidden] { display: none; }
.gm-modale__boite {
  width: min(520px, 100%); margin: auto;
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px; background: var(--gm-fond);
  border: 1px solid var(--gm-filet); border-top: 2px solid var(--gm-or);
  border-radius: var(--gm-rayon-carte);
}
.gm-modale__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gm-modale__pied { display: flex; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--gm-filet); padding-top: 20px; }
.gm-champ--bloc { display: flex; flex-direction: column; gap: 8px; align-items: stretch; font-size: 15px; color: var(--gm-texte); }
.gm-champ--bloc > span { font-weight: 500; }
.gm-champ--bloc select, .gm-champ--bloc input {
  min-height: 48px; padding: 0 12px; width: 100%;
  background: var(--gm-fond); border: 1px solid var(--gm-filet); border-radius: var(--gm-rayon-champ);
  font: 400 17px/1 var(--gm-sans); color: var(--gm-texte);
}
.gm-champ--bloc input[type="number"] { font-family: var(--gm-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- FAQ ---------- */
.gm-faq { display: grid; gap: 16px 48px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.gm-faq__intro { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.gm-faq details { border-top: 1px solid var(--gm-filet); padding: 14px 0; align-self: start; }
.gm-faq details:last-of-type { border-bottom: 1px solid var(--gm-filet); }
.gm-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; font: 500 21px/1.35 var(--gm-sans); }
.gm-faq summary::-webkit-details-marker { display: none; }
.gm-faq summary::after { content: "+"; color: var(--gm-or-texte); transition: transform 150ms ease; }
.gm-faq details[open] summary::after { transform: rotate(45deg); }
.gm-faq details p { margin-top: 12px; color: var(--gm-texte-atenue); }

/* ---------- Encart réglementaire ---------- */
.gm-encart {
  background: var(--gm-alerte-fond); border-left: 3px solid var(--gm-alerte);
  border-radius: var(--gm-rayon-carte); padding: 24px;
  display: flex; gap: 16px; align-items: flex-start;
}
.gm-encart p { font-size: 15px; line-height: 1.6; color: var(--gm-texte); max-width: 78ch; }

/* ---------- Fil d'Ariane ---------- */
.gm-ariane { display: flex; gap: 8px; flex-wrap: wrap; font: 400 13px/1.5 var(--gm-sans); color: var(--gm-texte-secondaire); padding: 20px 0 0; }
.gm-ariane a { color: var(--gm-texte-secondaire); }
.gm-ariane [aria-current] { color: var(--gm-texte); }

/* ---------- Repli mobile ---------- */
@media (max-width: 768px) {
  .gm-simulateur { padding: 20px; gap: 24px; }
  .gm-faq summary { font-size: 19px; }
  .gm-carte { padding: 20px; }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.gm-visuellement-masque {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Impression ---------- */
@page { size: A4 portrait; margin: 12mm 10mm; }
@media print {
  .gm-ticker, .gm-outils, .gm-partage, .gm-btn, .gm-simulateur, .gm-graphique, .gm-modale { display: none !important; }
  .gm-titre__outils { display: block !important; }
  .gm-cours { background: #fff; }
  .gm-tableau { overflow: visible; page-break-inside: avoid; }
  .gm-faq details { display: block; }
  .gm-faq details p { display: block !important; }
}

/* ---------- Tableaux lingots/pièces sur mobile (demande GOLDMARKET) ----------
   Sous 700 px : on garde Produit + Cours + Actions (l'essentiel de la décision),
   les colonnes Valeur du métal / Variation / Prime (et Poids pour les pièces)
   sont masquées — plus de défilement horizontal sur ces deux tableaux.
   Les boutons Acheter/Vendre passent en icône seule (le libellé reste lu par
   les lecteurs d'écran, il est réduit à font-size:0, pas retiré du DOM). */
@media (max-width: 700px) {
  .gm-tableau--lingots tr > *:nth-child(3),
  .gm-tableau--lingots tr > *:nth-child(4),
  .gm-tableau--lingots tr > *:nth-child(5) { display: none; }

  .gm-tableau--pieces tr > *:nth-child(2),
  .gm-tableau--pieces tr > *:nth-child(4),
  .gm-tableau--pieces tr > *:nth-child(5),
  .gm-tableau--pieces tr > *:nth-child(6) { display: none; }

  .gm-actions .gm-btn--or,
  .gm-actions .gm-btn--ligne {
    font-size: 0;
    gap: 0;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
  }

  #lingots .gm-tableau__glisser,
  #pieces .gm-tableau__glisser { display: none; }
}


/* ---------- Barre d'outils (Clôture/Date/Devise/Imprimer) sur UNE ligne ----
   Mobile : la mention « Clôture du … » double le champ Date, on la masque ;
   les libellés Date/Devise restent lus par les lecteurs d'écran. */
@media (max-width: 700px) {
  .gm-outils { flex-wrap: nowrap; gap: 10px; padding: 10px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gm-outils > .gm-mention { display: none; }
  .gm-outils__champs { flex-wrap: nowrap; flex: 1 1 auto; }
  .gm-champ > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gm-champ { position: relative; }
  .gm-outils .gm-btn { white-space: nowrap; flex: 0 0 auto; }
}

/* Mobile : les tableaux allégés n'ont plus de largeur minimale desktop —
   lingots/pièces tiennent dans l'écran (colonnes réduites ci-dessus),
   carats/poids/années sont naturellement étroits. Fixings et international
   restent défilants (largeur légitime). */
@media (max-width: 700px) {
  .gm-tableau--lingots table,
  .gm-tableau--pieces table,
  .gm-tableau--carats table,
  .gm-tableau--poids table,
  .gm-tableau--annees table { min-width: 0; }
  .gm-tableau--lingots th, .gm-tableau--lingots td,
  .gm-tableau--pieces th, .gm-tableau--pieces td { padding: 12px 10px; }
  .gm-actions { flex-wrap: nowrap; gap: 6px; }
}

/* ---------- Sélecteur de devises : style maison (fini le gris natif) ------- */
.gm-champ select {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 0 34px 0 12px;
  background: var(--gm-fond) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237A5A22' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--gm-filet); border-radius: var(--gm-rayon-champ);
  font: 500 15px/1.2 var(--gm-mono); color: var(--gm-texte);
  cursor: pointer;
}
.gm-champ select:hover { border-color: var(--gm-encre); }

/* Bouton Imprimer masqué sur mobile (impression = usage bureau) */
@media (max-width: 700px) {
  [data-gm-imprimer] { display: none; }
}

/* ---------- Graphique façon site financier ---------- */
.gm-graphique__bulle {
  position: absolute; z-index: 2; pointer-events: none;
  transform: translate(-50%, -150%);
  background: var(--gm-encre); color: #FAFAF8;
  font: 500 12.5px/1 var(--gm-mono);
  padding: 6px 9px; border-radius: 4px; white-space: nowrap;
}

/* ---------- CTA investissement (remplace le simulateur) ---------- */
.gm-cta-invest {
  background: var(--gm-encre); color: #FAFAF8;
  border-radius: var(--gm-rayon-carte);
  padding: clamp(24px, 4vw, 44px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
}
.gm-cta-invest__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.gm-cta-invest .gm-btn--ligne { border: 1.5px solid var(--gm-or); color: #E4C48A; background: transparent; }
.gm-cta-invest .gm-btn--ligne:hover { background: rgba(196, 145, 58, 0.12); }
/* Rendez-vous sur poste fixe, Appeler sur mobile/tactile. */
.gm-cta-invest__rdv { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gm-cta-invest__rdv { display: inline-flex; }
  .gm-cta-invest__tel { display: none; }
}
@media (max-width: 700px) {
  .gm-cta-invest__btns { width: 100%; }
  .gm-cta-invest__btns .gm-btn { flex: 1 1 auto; justify-content: center; min-height: 56px; }
}

/* ---------- Tableau des pièces : tient sans défilement sur PC ----------
   La min-width 1000px du kit dépassait juste la colonne de contenu (1152px
   utiles) à cause de la colonne Actions. On laisse le tableau se caler sur
   son conteneur et on compacte cellules et boutons. */
.gm-tableau--pieces table { min-width: 0; }
.gm-tableau--pieces th, .gm-tableau--pieces td { padding-left: 10px; padding-right: 10px; }
.gm-tableau--pieces .gm-actions { gap: 6px; flex-wrap: nowrap; }
.gm-tableau--pieces .gm-actions .gm-btn--compact { padding: 0 13px; }
.gm-tableau--pieces .gm-tableau__glisser { display: none; }


/* =================================================================
   Correctifs mobile et accessibilite — audit du 7 aout 2026
   ================================================================= */

/* Pastille « cours en direct » du bloc de cotation. Le point pulse pour
   signaler que la cotation est vivante ; l'animation est coupee si
   l'utilisateur a demande moins de mouvement. */
.gm-live {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 9px 16px 9px 13px; border: 1px solid var(--gm-filet);
  border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(26,24,20,.04);
}
.gm-live__dot {
  position: relative; flex: 0 0 auto; width: 8px; height: 8px;
  border-radius: 50%; background: #1E9E5A;
}
.gm-live__dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid #1E9E5A; opacity: 0; animation: gm-pulse 2.4s ease-out infinite;
}
@keyframes gm-pulse { 0% { transform: scale(.6); opacity: .9 } 100% { transform: scale(1.5); opacity: 0 } }
.gm-live__k {
  font: 600 11.5px/1 var(--gm-sans); letter-spacing: .13em;
  text-transform: uppercase; color: #157A45;
}
.gm-live__sep { width: 1px; height: 14px; background: var(--gm-filet) }
.gm-live__ts { font: 500 13.5px/1 var(--gm-mono); color: var(--gm-texte-secondaire) }
@media (max-width: 480px) {
  .gm-live { padding: 8px 13px 8px 11px; gap: 8px }
  .gm-live__ts { font-size: 12.5px }
}
@media (prefers-reduced-motion: reduce) { .gm-live__dot::after { animation: none } }

/* Cible tactile des bulles d'aide : 18x18 echouait au critere WCAG 2.2
   AA 2.5.8 (24x24 minimum). Le cercle visible garde son diametre, la
   zone cliquable est etendue par un pseudo-element. */
.gm-aide__bouton {
  position: relative; width: 24px; height: 24px; font-size: 12px;
}

/* Affordance de defilement : les tableaux fixings et international
   restent volontairement plus larges que l'ecran. Sans indice visuel,
   rien ne dit qu'on peut les faire glisser — le libelle texte ayant ete
   retire a la demande du client, on le remplace par un degrade de bord
   qui disparait une fois le tableau defile jusqu'au bout. */
.gm-tableau {
  background:
    linear-gradient(to right, var(--gm-fond) 30%, rgba(250,250,248,0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--gm-fond) 30%, rgba(250,250,248,0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(26,24,20,.14), rgba(26,24,20,0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(26,24,20,.14), rgba(26,24,20,0)) right center / 14px 100% no-repeat scroll,
    var(--gm-fond);
}
.gm-tableau:focus-visible { outline: 2px solid var(--gm-or); outline-offset: 2px }

/* Graphique TradingView : 460px fixes occupaient pres de 60 % de la
   hauteur utile d'un ecran de 360x780. */
@media (max-width: 700px) { .gm-graphique { height: 320px !important } }

/* Le header du theme est sticky : sans cette reserve, tout lien profond
   vers une section fait atterrir son titre sous le header. */
.gm-cours [id] { scroll-margin-top: 96px }

/* Filet de securite sur fond sombre. Les boutons poses sur .gm-section--encre
   tirent leur couleur d'une regle de faible specificite (.gm-btn--clair).
   Si elle saute — purge de cache, CSS optimise, ordre de cascade — le
   bouton herite du texte sombre de la section et devient invisible sur
   #1A1814. On reancre donc la couleur avec une specificite superieure. */
.gm-section--encre .gm-btn--clair,
.gm-carte--encre .gm-btn--clair {
  border-color: #FAFAF8; color: #FAFAF8; background: transparent;
}
.gm-section--encre .gm-btn--clair:hover,
.gm-carte--encre .gm-btn--clair:hover {
  background: var(--gm-encre-surface); color: #FAFAF8;
}
.gm-section--encre .gm-btn--ligne,
.gm-carte--encre .gm-btn--ligne {
  border-color: var(--gm-or); color: #E4C48A; background: transparent;
}
.gm-section--encre .gm-btn--ligne:hover,
.gm-carte--encre .gm-btn--ligne:hover {
  background: rgba(196, 145, 58, .12); color: #F3E3C4;
}

/* Tableau international : ligne de separation entre les cinq devises
   principales et les autres devises publiees par la BCE, plus le nom de
   devise porte par l'en-tete de ligne. */
.gm-tableau--international tr.gm-sep,
.gm-tableau--international tr.gm-sep th { background: var(--gm-surface); }
.gm-tableau--international tr.gm-sep th {
  padding: 10px 16px;
  border-top: 1px solid var(--gm-filet);
  color: var(--gm-or-texte);
  font: 600 12px/1.4 var(--gm-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
}
.gm-tableau--international .gm-devise-nom {
  display: block;
  font: 400 12px/1.3 var(--gm-mono);
  letter-spacing: 0.02em;
  color: var(--gm-texte-atenue);
}

/* Barre d outils du bloc de cotation : pastille, date, devise et impression
   tenaient sur deux lignes des que le selecteur de devises s est allonge.
   On la tient sur une seule ligne au-dessus de 900 px, le select etant le
   seul element autorise a se comprimer. En dessous, on laisse retomber. */
@media (min-width: 901px) {
  .gm-outils { flex-wrap: nowrap; gap: 10px 18px; }
  .gm-outils .gm-live { flex: 0 0 auto; }
  .gm-outils__champs { flex-wrap: nowrap; min-width: 0; }
  .gm-outils__champs .gm-champ:nth-of-type(2) { min-width: 0; flex: 0 1 auto; }
  .gm-outils__champs select {
    max-width: 210px; min-width: 0; width: 100%;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  }
  .gm-outils .gm-btn { flex: 0 0 auto; }
}

/* Barre d outils en mobile : une seule ligne, sans defilement.
   L impression n a pas de sens sur telephone, le bouton est reserve au
   poste fixe. L horodatage de la pastille fait doublon avec le champ date
   qui le jouxte, on le retire. Les zones tactiles restent a 44 px. */
.gm-live__court { display: none; }
@media (max-width: 700px) {
  .gm-outils { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; overflow-x: visible; }
  .gm-outils [data-gm-imprimer] { display: none; }
  .gm-outils .gm-champ > span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .gm-live { flex: 0 0 auto; gap: 7px; padding: 7px 12px 7px 10px; }
  .gm-live__sep, .gm-live__ts, .gm-live__long { display: none; }
  .gm-live__court { display: inline; }
  .gm-outils__champs { flex: 1 1 auto; min-width: 0; gap: 8px; justify-content: flex-end; }
  .gm-outils__champs .gm-champ { min-width: 0; }
  .gm-outils__champs input[type="date"] { min-height: 44px; padding: 0 8px; font-size: 14px; }
  .gm-outils__champs select {
    min-height: 44px; max-width: 112px; min-width: 0; width: 100%;
    padding: 0 8px; font-size: 14px;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  }
}

/* CTA de fin de page cours : deux actions sur ordinateur, trois sur
   telephone ou l'appel prend tout son sens. Les boutons occupent la
   pleine largeur de la colonne pour rester lisibles sur fond sombre. */
.gm-cta-final { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.gm-cta-final .gm-btn { width: 100%; justify-content: center; gap: 10px; }
.gm-cta-final__tel { font-variant-numeric: tabular-nums; }
@media (min-width: 901px) {
  .gm-cta-final { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .gm-cta-final .gm-btn { width: auto; }
}

/* ============================================================
   Hero de cotation — /cours-or/
   Ajouté le 19 août 2026. Objectif : les trois cotations
   visibles au chargement sur mobile, sans défilement.
   Le chapeau n'est jamais masqué : il reste rendu côté serveur
   et juste après le H1 dans le DOM ; seul son ordre visuel
   change sur mobile, par « order ».
   ============================================================ */
.gm-hero-cot__in { display: flex; flex-direction: column; gap: 16px; }
.gm-hero-cot__outils,
.gm-hero-cot__grille,
.gm-hero-cot .gm-bande { margin-top: 16px; }

/* Variation sur carte sombre : #2F5D3A ne donne que 2,30:1 sur #1A1814,
   sous le seuil AA. Teintes claires équivalentes : 8,2:1 et 6,8:1.
   .gm-section--encre avait la parade, .gm-carte--encre non. */
.gm-carte--encre .gm-hausse { color: #7FBF8F; }
.gm-carte--encre .gm-baisse { color: #E8867A; }

@media (max-width: 700px) {
  .gm-hero-cot { padding-top: 14px; padding-bottom: 28px; }
  .gm-hero-cot__in { gap: 12px; }
  .gm-hero-cot__outils,
  .gm-hero-cot__grille,
  .gm-hero-cot .gm-bande { margin-top: 0; }

  /* Ordre visuel : titre, repères (direct, date, devise), cotations, autres
     métaux, chapeau. Demande client du 4 septembre 2026 : la barre de
     sélection vient après le titre, juste avant les cotations — même ordre
     que sur ordinateur, où le DOM fait foi. */
  .gm-hero-cot__h1       { order: 1; }
  .gm-hero-cot__outils   { order: 2; }
  .gm-hero-cot__grille   { order: 3; }
  .gm-hero-cot .gm-bande { order: 4; }
  .gm-hero-cot__chapeau  { order: 5; }

  .gm-cours .gm-hero-cot__h1 {
    font-size: 23px; line-height: 1.2;
    padding-bottom: 10px; border-bottom-width: 2px;
  }
  .gm-hero-cot__chapeau { font-size: 15px; line-height: 1.5; }

  /* 1 kg en pleine largeur, 1 g et 1 once côte à côte. */
  .gm-hero-cot__grille.gm-grille { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gm-hero-cot__grille > .gm-carte:nth-child(1),
  .gm-hero-cot__grille > .gm-carte:nth-child(4) { grid-column: 1 / -1; }
  .gm-hero-cot__grille > .gm-carte { padding: 14px 16px; gap: 4px; }
  .gm-hero-cot__grille .gm-cotation--xl { font-size: 34px; }
  .gm-hero-cot__grille .gm-cotation--l  { font-size: 23px; }
  .gm-hero-cot__grille .gm-etiquette    { font-size: 11px; letter-spacing: 0.06em; }
  .gm-hero-cot__grille .gm-carte__note  { font-size: 13px; line-height: 1.35; }
}

/* ============================================================
   Barre d'outils de /cours-or/ — 19 août 2026
   1. « Imprimer » sur ordinateur seulement. La règle existante
      s'arrêtait à 700 px ; entre 701 et 900 px — les tablettes —
      le bouton réapparaissait. Le seuil rejoint celui du bloc
      « ordinateur » déjà en place, min-width 901px.
   2. Champ date et sélecteur de devise au même gabarit.
   3. Sélecteur de date à la charte.
   Mêmes règles que celles portées par .gm-cbarre dans
   gm-cours-barre.php, pour que les deux barres du site soient
   identiques à l'œil.
   ============================================================ */

/* 1. Imprimer : ordinateur uniquement. */
@media (max-width: 900px) {
  .gm-outils [data-gm-imprimer] { display: none !important; }
}

/* 2 et 3. Les deux champs au même gabarit, à la charte. */
.gm-outils__champs input[type="date"],
.gm-outils__champs select {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  font: 500 15px/1 var(--gm-sans);
  color: var(--gm-texte);
  background-color: var(--gm-fond);
  border: 1px solid var(--gm-filet);
  border-radius: var(--gm-rayon-champ);
}

/* Le chevron du select occupe la droite : on réserve la même
   gouttière au champ date, pour que les deux textes s'alignent. */
.gm-outils__champs select { padding-right: 34px; }
.gm-outils__champs input[type="date"] { padding-right: 10px; }

.gm-outils__champs input[type="date"]:hover,
.gm-outils__champs select:hover { border-color: var(--gm-encre); }

.gm-outils__champs input[type="date"]:focus-visible,
.gm-outils__champs select:focus-visible {
  outline: 2px solid var(--gm-or-texte);
  outline-offset: 2px;
}

/* Le sélecteur natif est remplacé par l'icône de la charte.
   Le SVG est porté en data-URI : l'optimiseur ne le réécrit jamais.
   Teinte #7A5A22 — l'or #C4913A ne porte pas de texte sur fond clair. */
.gm-outils__champs input[type="date"]::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  cursor: pointer;
  opacity: 0.8;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5A22' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.gm-outils__champs input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Largeurs. Sur tablette les libellés « Date » et « Devise » sont encore
   visibles et n'ont pas la même longueur : dimensionner les enveloppes
   à parts égales déséquilibrerait les champs eux-mêmes. On fixe donc les
   champs, pas leurs enveloppes — mesuré, 164 px contre 134 px sinon. */
@media (min-width: 901px) {
  .gm-outils__champs input[type="date"],
  .gm-outils__champs select { width: 190px; max-width: 190px; flex: 0 0 190px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .gm-outils__champs .gm-champ { flex: 0 1 auto; min-width: 0; }
  .gm-outils__champs input[type="date"],
  .gm-outils__champs select { width: 150px; max-width: 150px; flex: 0 0 150px; }
}
@media (max-width: 700px) {
  .gm-outils__champs .gm-champ { flex: 1 1 0; min-width: 0; }
  .gm-outils__champs input[type="date"],
  .gm-outils__champs select {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    font-size: 14px;
    padding-left: 10px;
  }
  .gm-outils__champs select { padding-right: 30px; }
}

@media(max-width:700px){.gm-cta-final .gm-btn,.gm-cta-lingots .gm-btn{min-height:58px}}

/* Cibles tactiles (audit Playwright 24/08). La question de FAQ devient
   cliquable sur toute sa hauteur (>= 44 px) sans changer le rythme : le
   padding vertical passe du conteneur au sommaire. */
.gm-faq details { padding: 0; }
.gm-faq summary { min-height: 44px; align-items: center; padding: 14px 0; box-sizing: border-box; }
.gm-faq details > p { margin: 0 0 14px; }
/* Lien d'achat posé dans les lignes de tableaux : zone tactile élargie par
   pseudo-élément, sans décaler la ligne ni son soulignement. */
.gm-cta-ligne { position: relative; }
.gm-cta-ligne::before { content: ""; position: absolute; inset: -12px -8px; }


/* =====================================================================
   Audit navigateur du 25 aout 2026 — correctifs de CASCADE.
   Les trois regles visees existaient deja ; elles etaient ecrasees,
   par specificite ou par ordre de declaration. Mesure au rendu, pas par
   lecture de la feuille : c'est ce qui les rendait invisibles.
   ===================================================================== */

/* 1. P0 — bouton d'achat illisible.
      « .gm-cours a { color: var(--gm-or-texte) } » (0,1,1) battait
      « .gm-btn--or { color: var(--gm-encre) } » (0,1,0), pose dans le
      meme fichier. Rendu mesure : #7A5A22 sur #C4913A = 2,25:1 pour 4,5
      requis, sur « Acheter au cours du jour ». Encre = 6,30:1.
      Rappel brandbook : bouton dore -> texte encre, jamais blanc.      */
.gm-cours a.gm-btn--or,
.gm-cours a.gm-btn--or:hover,
.gm-cours a.gm-btn--or:focus-visible,
a.gm-btn--or { color: var(--gm-encre); }

/* 2. .gm-cta-invest est un bloc a fond encre que ni .gm-section--encre
      ni .gm-carte--encre ne couvrait : l'etiquette « Passer a l'action »
      sortait en --gm-or-texte, soit 2,80:1 sur l'encre.                */
.gm-cta-invest .gm-etiquette { color: var(--gm-or); }

/* 3. « .gm-refuge .gm-mention » (0,2,0) etait battue A L'ORDRE par
      « .gm-section--surface .gm-mention » (0,2,0), declaree plus loin :
      la mention « depuis 2000 » sortait a 3,25:1 sur l'encre.          */
.gm-section--surface .gm-refuge .gm-mention,
.gm-refuge .gm-mention { color: var(--gm-texte-sombre-atenue); }

/* 4. Hauteur des boutons sur mobile : regle client du 10 aout 2026,
      56 a 60 px. .gm-btn valait 48 px, et seuls .gm-cta-final et
      .gm-cta-lingots montaient a 58. Les boutons d'action en ligne de
      tableau (.gm-actions) et les variantes icone / compact / partage
      gardent leurs 44 px : ce sont des cibles, pas des boutons d'appel
      a l'action, et les elargir casserait les tableaux de cotation.    */
@media (max-width: 700px) {
  .gm-btn:not(.gm-btn--icone):not(.gm-btn--compact):not(.gm-btn--partage) { min-height: 56px; }
  .gm-actions .gm-btn--or,
  .gm-actions .gm-btn--ligne,
  .gm-actions .gm-btn { min-height: 44px; }
}


/* =====================================================================
   Tableaux de cotation sur mobile — signale par le client le 25 aout
   2026 (captures a 390 px) : la colonne ACTIONS, donc les boutons
   d'achat, sortait de l'ecran, et le libelle du tableau etait tronque.
   Mesure avant correction, a 390 px : les 10 tableaux de /cours-or/
   debordaient, de 54 a 461 px. Ils defilaient bien dans leur conteneur,
   mais rien ne l'indiquait et l'appel a l'achat etait invisible.

   Deux regimes, parce que les deux familles de tableaux n'ont pas le
   meme contrat :
   1. ceux qui portent des boutons d'action DOIVENT tenir dans l'ecran ;
   2. ceux qui alignent 4 ou 5 colonnes de cotations ne le peuvent pas
      sans devenir illisibles : ils gardent leur defilement, mais on le
      REND VISIBLE par une ombre de bord qui s'efface en fin de course.
   ===================================================================== */
@media (max-width: 700px) {

  /* --- 1. Tableaux porteurs de boutons : tenir dans l'ecran --------- */
  .gm-tableau table:has(.gm-actions) {
    min-width: 0 !important; table-layout: fixed; width: 100%; font-size: 13.5px;
  }
  .gm-tableau table:has(.gm-actions) th,
  .gm-tableau table:has(.gm-actions) td { padding: 8px 4px; }

  /* Les en-tetes se replient ; les VALEURS jamais : couper un montant
     en deux (« 4 / 120,00 EUR ») est pire que de le laisser deborder. */
  .gm-tableau table:has(.gm-actions) thead th { white-space: normal !important; overflow-wrap: break-word; }
  .gm-tableau table:has(.gm-actions) .gm-col-nb { white-space: nowrap; }

  /* Seul le libelle produit se replie, et par mots entiers
     (break-word, jamais anywhere, qui donnait « Souvera / in »). */
  .gm-tableau table:has(.gm-actions) tbody th[scope="row"] { white-space: normal; }
  .gm-tableau table:has(.gm-actions) .gm-vign__nom { overflow-wrap: break-word; hyphens: auto; font-size: 13px; }
  .gm-tableau table:has(.gm-actions) .gm-vign__img { width: 28px; height: 28px; }

  /* 37 / 24 / 39 : le libelle, le cours, puis trois cibles de 44 px. */
  .gm-tableau table:has(.gm-actions) thead th:first-child,
  .gm-tableau table:has(.gm-actions) tbody th[scope="row"] { width: 37%; }
  .gm-tableau table:has(.gm-actions) thead th:last-child,
  .gm-tableau table:has(.gm-actions) tbody td:last-child { width: 39%; }
  .gm-actions { gap: 4px !important; flex-wrap: nowrap; justify-content: flex-end; }
  .gm-actions .gm-btn { min-width: 44px !important; width: 44px; padding: 0 !important; }

  /* --- 2. Tableaux de donnees larges : defilement SIGNALE ----------- */
  .gm-tableau:not(:has(.gm-actions)),
  .gm-cdb-scroll {
    background-image:
      linear-gradient(90deg, #FAFAF8 30%, rgba(250,250,248,0)),
      linear-gradient(90deg, rgba(250,250,248,0), #FAFAF8 70%),
      radial-gradient(farthest-side at 0 50%, rgba(26,24,20,.16), rgba(26,24,20,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(26,24,20,.16), rgba(26,24,20,0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  /* Le min-width en dur (640 a 820 px selon les tableaux) garantissait le
     debordement sur mobile : on le leve, la course de defilement tombe de
     moitie a deux tiers. Les tableaux a 6 ou 7 colonnes de cotations ne
     peuvent pas tenir dans 358 px sans devenir illisibles : ils gardent un
     defilement, desormais court et signale. */
  .gm-tableau:not(:has(.gm-actions)) table,
  .gm-cdb-scroll table { min-width: 0 !important; font-size: 12.5px; }
  .gm-tableau:not(:has(.gm-actions)) tbody th[scope="row"] { white-space: normal; overflow-wrap: break-word; }
  .gm-tableau:not(:has(.gm-actions)) th,
  .gm-tableau:not(:has(.gm-actions)) td,
  .gm-cdb-scroll th,
  .gm-cdb-scroll td { padding: 7px 6px; white-space: nowrap; }
}