/*
 * Pied de page GOLDMARKET — cale sur la maquette Footer_Goldmarket.
 *
 * Un sommaire ordonne, pas un mur de liens. Ce qui rend la densite lisible
 * n'est pas la reduction du nombre : c'est le surtitre en DM Mono qui annonce
 * le volume de chaque colonne, le filet qui separe sans encadrer, et un rythme
 * vertical constant.
 *
 * Zero image, zero degrade, zero ombre. Le chevron est une bordure pivotee.
 * Rayon de 2 px partout, sauf les pastilles de reseau qui sont des cercles.
 *
 * Le balisage est genere par gm-footer.php a partir d'un tableau PHP.
 *
 * DM MONO EST EN GRAISSE 400, ET C'EST VOULU. Le seul fichier livre est
 * uploads/gm-fonts/dmmono-400.woff2 : une declaration font:500 y retombait
 * silencieusement (l'algorithme de correspondance CSS descend de 500 vers 400
 * avant de monter, et aucun navigateur ne synthetise de gras a 500). La feuille
 * annoncait donc une graisse qu'elle n'obtenait pas. Ecrire 400 ne change pas
 * un pixel du rendu, il le rend lisible. Ne pas remettre 500 sans livrer
 * dmmono-500.woff2 -- et sans arbitrer d'abord avec gm-front-perf.php, qui
 * ramene toutes les graisses du site sur un fichier unique par famille.
 */

#gm-footer{
  --gmf-encre:#1A1814; --gmf-panneau:#211E19; --gmf-filet:#4A4439;
  --gmf-clair:#FAFAF8; --gmf-orclair:#E4C48A; --gmf-lien:#A9A093;
  --gmf-or:#C4913A; --gmf-orfonce:#A97B2E; --gmf-surtitre:#8F8679;
  --gmf-filetui:#706859;
  background:var(--gmf-encre); color:var(--gmf-lien);
  font-family:"DM Sans",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent; overflow-x:clip;
}
#gm-footer *{box-sizing:border-box}
.gmf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gmf-wrap{max-width:1440px;margin:0 auto}
#gm-footer a:focus-visible,#gm-footer button:focus-visible{outline:2px solid var(--gmf-or);outline-offset:3px}

/* ---------- 1. Bande de conversion ---------- */
/* Sous 1024 px la porte devient une rangee : accent a gauche, fleche a droite.
   Au-dessus, une carte en colonne avec accent en filet superieur. */
.gmf-portes{display:grid;gap:10px;padding:20px 16px;border-bottom:1px solid var(--gmf-filet)}
.gmf-porte{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:64px;padding:12px 18px;text-decoration:none;color:inherit;
  border:1px solid var(--gmf-filetui);border-left-color:var(--gmf-or);border-radius:2px;
  transition:border-color .18s linear,background-color .18s linear}
.gmf-porte:hover{border-color:var(--gmf-orclair);background:var(--gmf-panneau)}
.gmf-porte:active{border-color:var(--gmf-orfonce);background:var(--gmf-panneau)}
.gmf-porte__c{display:flex;flex-direction:column;gap:4px;min-width:0}
.gmf-porte__s{font:400 11px/1.3 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gmf-surtitre)}
.gmf-porte__t{font:500 18px/1.25 "Playfair Display",Georgia,serif;color:var(--gmf-clair)}
.gmf-porte__n{display:none}
.gmf-porte__f{flex:0 0 auto;font:400 17px/1 "DM Mono",ui-monospace,monospace;color:var(--gmf-or)}
@media(min-width:641px){.gmf-portes{padding:28px 32px;gap:12px}.gmf-porte{padding:18px 22px}.gmf-porte__t{font-size:20px}.gmf-porte__f{font-size:18px}}
@media(min-width:1024px){
  .gmf-portes{grid-template-columns:repeat(3,1fr);gap:20px;padding:40px 64px}
  .gmf-porte{flex-direction:column;align-items:stretch;gap:12px;min-height:0;padding:24px 26px;
    border-left-color:var(--gmf-filetui);border-top-color:var(--gmf-or)}
  .gmf-porte__c{gap:12px}
  .gmf-porte__s{font-size:12px}
  .gmf-porte__t{font-size:24px;letter-spacing:-.01em;text-wrap:pretty}
  /* Sur trois colonnes, la note remplace la fleche seule : elle dit ou l on va. */
  .gmf-porte__n{display:flex;align-items:center;gap:10px;font:400 14px/1.4 "DM Mono",ui-monospace,monospace;color:var(--gmf-or)}
  .gmf-porte__n::after{content:"\2192";font-size:16px}
  .gmf-porte__f{display:none}
}

/* ---------- 2. Bloc d'identite ---------- */
/* Le corps tient les trois blocs. Sous 641 px ils s empilent ; en tablette
   l identite et les annexes se partagent la largeur et le sommaire passe
   dessous sur toute la laize ; sur ordinateur l identite et les annexes
   forment un rail de 310 px et le sommaire prend la colonne de droite. */
.gmf-corps{padding:22px 16px 18px;display:flex;flex-direction:column;gap:22px}
@media(min-width:641px){
  .gmf-corps{padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
  .gmf-corps>.gmf-plan{grid-column:1/-1}
}
@media(min-width:1024px){
  .gmf-corps{padding:48px 64px;grid-template-columns:310px 1fr;gap:0 64px}
  .gmf-corps>.gmf-id__a{grid-column:1;grid-row:1}
  .gmf-corps>.gmf-annexes{grid-column:1;grid-row:2;margin-top:24px}
  .gmf-corps>.gmf-plan{grid-column:2;grid-row:1/span 2}
}
.gmf-id__a{display:flex;flex-direction:column;gap:12px}
@media(min-width:1024px){.gmf-id__a{gap:24px}}
/* Le logo est en DM Sans espace, pas en Playfair : c est une marque, pas un titre. */
.gmf-logo{margin:0;font:500 19px/1 "DM Sans",system-ui,sans-serif;letter-spacing:.14em;color:var(--gmf-clair)}
.gmf-logo span{color:var(--gmf-orclair)}
@media(min-width:641px){.gmf-logo{font-size:20px}}
@media(min-width:1024px){.gmf-logo{font-size:22px}}
.gmf-adr{margin:0;font:400 15px/1.7 "DM Sans",system-ui,sans-serif;color:var(--gmf-lien);font-style:normal}
.gmf-adr__s{display:none}
@media(min-width:1024px){.gmf-adr__s{display:block}}
.gmf-rcs{margin:0;font:400 13px/1.6 "DM Mono",ui-monospace,monospace;color:var(--gmf-surtitre)}

/* Telephone et bouton : empiles en pleine largeur sous 641 px — cote a cote,
   le libelle du bouton se coupait en deux lignes. Au-dessus, sur une rangee. */
.gmf-actions{display:flex;flex-direction:column;gap:8px}
@media(min-width:641px){.gmf-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}}
.gmf-tel{display:flex;align-items:center;justify-content:center;min-height:56px;
  border:1px solid var(--gmf-filetui);border-radius:2px;text-decoration:none;
  font:400 19px/1 "DM Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
  color:var(--gmf-clair);white-space:nowrap}
.gmf-tel:hover{color:var(--gmf-orclair);border-color:var(--gmf-orclair)}
@media(min-width:641px){.gmf-tel{display:inline-flex;min-height:44px;border:0;font-size:20px}}
@media(min-width:1024px){.gmf-tel{font-size:21px}}
/* Le seul aplat d'or du pied de page. Texte encre, jamais blanc. 
   Sur cet aplat, le contour de focus passe en clair. */
.gmf-rdv{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 16px;
  background:var(--gmf-or);border:1px solid var(--gmf-or);border-radius:2px;text-decoration:none;
  font:400 15px/1 "DM Mono",ui-monospace,monospace;color:var(--gmf-encre);white-space:nowrap;
  transition:background-color .18s linear,border-color .18s linear}
.gmf-rdv:hover{background:var(--gmf-orclair);border-color:var(--gmf-orclair);color:var(--gmf-encre)}
.gmf-rdv:active{background:var(--gmf-orfonce);border-color:var(--gmf-orfonce)}
.gmf-rdv:focus-visible{outline-color:var(--gmf-clair)}
@media(min-width:641px){.gmf-rdv{display:inline-flex;min-height:44px;padding:0 18px;font-size:14px}}

/* Blocs annexes : chaque bloc s ouvre sur un filet et son etiquette. */
.gmf-annexes{display:flex;flex-direction:column;gap:16px}
@media(min-width:1024px){.gmf-annexes{gap:0}}
.gmf-bloc{display:flex;flex-direction:column;gap:10px}
@media(min-width:1024px){.gmf-bloc{gap:12px;border-top:1px solid var(--gmf-filet);padding-top:18px;margin-top:18px}
  .gmf-bloc:first-child{border-top:0;padding-top:0;margin-top:0}}
.gmf-bloc__t{margin:0;font:400 11px/1.3 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gmf-surtitre)}
@media(min-width:1024px){.gmf-bloc__t{font-size:12px}}
.gmf-rs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.gmf-rs a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--gmf-filetui);color:var(--gmf-lien);transition:color .18s linear,border-color .18s linear}
.gmf-rs a:hover{color:var(--gmf-orclair);border-color:var(--gmf-orclair)}
.gmf-rs a:active{color:var(--gmf-clair)}
.gmf-rs svg{width:20px;height:20px;display:block}
/* Selecteur de langue : un seul cartouche segmente, trois codes sur une
   ligne. Trois pastilles portant Francais, English et Nederlands se
   repliaient sur trois rangees dans un rail de 310 px, soit 140 px cedes
   a un reglage que la quasi-totalite des visites ne touche jamais.
   Le nom complet reste dans le document, porte par aria-label. */
.gmf-lang{display:inline-flex;list-style:none;margin:0;padding:0;
  border:1px solid var(--gmf-filetui);border-radius:2px;overflow:hidden}
.gmf-lang a{display:flex;align-items:center;justify-content:center;
  min-width:52px;min-height:44px;padding:0 12px;text-decoration:none;
  font:400 12px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.12em;
  color:var(--gmf-lien);transition:color .18s linear,background-color .18s linear}
.gmf-lang li+li a{border-left:1px solid var(--gmf-filetui)}
.gmf-lang a:hover{color:var(--gmf-orclair);background:var(--gmf-panneau)}
/* La langue servie se marque par l aplat ET le filet d or, jamais par la
   couleur du texte seule : un cartouche segmente doit rester lisible sans
   distinguer les teintes. Le filet est pose en bordure interieure sur une
   hauteur reservee, il ne deplace donc aucun voisin. */
.gmf-lang a{border-bottom:2px solid transparent}
.gmf-lang a[aria-current="true"]{background:var(--gmf-panneau);border-bottom-color:var(--gmf-or);color:var(--gmf-clair)}

/* ---------- 3. Grille de sommaire ---------- */
/* Sous 641 px : un accordeon, un seul panneau ouvert. Au-dessus : deux colonnes,
   puis trois sur ordinateur — six colonnes cote a cote reduiraient chaque libelle
   a une colonne de 61 px, ou « Actualite des metaux precieux » ne tient pas. */
.gmf-plan{display:block}
.gmf-cols{display:flex;flex-direction:column}
@media(min-width:641px){.gmf-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}}
@media(min-width:1024px){.gmf-cols{grid-template-columns:repeat(3,1fr);gap:44px 40px}}

.gmf-col{border-bottom:1px solid var(--gmf-filet);min-width:0}
@media(min-width:641px){.gmf-col{border-bottom:0;border-top:1px solid var(--gmf-filet);display:flex;flex-direction:column}}

/* L'en-tete est la commande du panneau sous 641 px, un simple titre au-dessus. */
.gmf-col__h{margin:0}
.gmf-col__b{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  min-height:54px;padding:0 16px;background:transparent;border:0;cursor:pointer;text-align:left}
@media(max-width:640px){.gmf-col__b[aria-expanded="true"]{background:var(--gmf-panneau)}}
.gmf-col__i{display:flex;flex-direction:column;gap:2px;min-width:0}
.gmf-col__t{font:500 18px/1.3 "Playfair Display",Georgia,serif;color:var(--gmf-clair)}
/* Le chevron est une bordure pivotee, pas un SVG. Seule sa rotation est animee. */
.gmf-col__c{flex:0 0 auto;width:11px;height:11px;border-right:1.5px solid var(--gmf-or);
  border-bottom:1.5px solid var(--gmf-or);transform:rotate(45deg);transition:transform .16s ease}
.gmf-col__b[aria-expanded="true"] .gmf-col__c{transform:rotate(225deg)}
@media(prefers-reduced-motion:reduce){.gmf-col__c{transition:none}}

/* Le repli masque a l ecran, jamais dans le document.
   31 aout 2026 : l etat par defaut est OUVERT, et c est le script qui replie.
   L inverse — replie par defaut, deplie par le script — rendait les soixante
   liens injoignables sous 641 px quand le script ne s executait pas : WP Rocket
   sert ce script en text/rocketlazyloadscript, donc apres la premiere
   interaction, et la premiere tape etait consommee par son chargeur. Sans
   JavaScript du tout, le sommaire disparaissait entierement du rendu ET de
   l arbre d accessibilite, display:none ne masquant pas qu a l ecran. */
.gmf-col__p{display:block;padding:2px 16px 16px}
.gmf-col__p[data-ferme="1"]{display:none}
.gmf-liens{list-style:none;margin:0;padding:0}
.gmf-liens a{display:flex;align-items:center;min-height:44px;text-decoration:none;
  font:400 15px/1.4 "DM Mono",ui-monospace,monospace;color:var(--gmf-lien);transition:color .18s linear}
/* Le survol change la couleur, jamais le soulignement ni la graisse. */
.gmf-liens a:hover{color:var(--gmf-orclair)}
.gmf-liens a:active{color:var(--gmf-clair)}

@media(min-width:641px){
  .gmf-col__b{min-height:0;padding:12px 0 8px;cursor:default;pointer-events:none;align-items:flex-start}
  .gmf-col__c{display:none}
  .gmf-col__i{gap:4px}
  .gmf-col__t{font-size:19px;color:var(--gmf-clair)}
  .gmf-col__p,.gmf-col__p[data-ferme="1"]{display:block;padding:0}
  .gmf-liens a{display:block;min-height:0;padding:7px 0;line-height:1.5}
}
@media(min-width:1024px){.gmf-col__b{padding:14px 0 10px}.gmf-col__t{font-size:21px;letter-spacing:-.01em}}

/* ---------- 4. Barre legale ---------- */
.gmf-legal{border-top:1px solid var(--gmf-filet);padding:20px 16px;display:flex;flex-direction:column;gap:14px}
@media(min-width:641px){.gmf-legal{padding:20px 32px}}
@media(min-width:1024px){.gmf-legal{flex-direction:row;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:24px 64px}}
.gmf-legal ul{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0;padding:0}
@media(min-width:1024px){.gmf-legal ul{gap:6px 22px}}
.gmf-legal a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  font:400 12px/1.4 "DM Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gmf-lien);white-space:nowrap}
.gmf-legal a:hover{color:var(--gmf-orclair)}
.gmf-legal a:active{color:var(--gmf-clair)}
.gmf-copy{margin:0;font:400 12px/1.4 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;
  color:var(--gmf-surtitre);white-space:nowrap}