/* ------------------------------------------------------------------------ GoldReserve : largeur du site sur grand ecran. ⚠️ CE N'EST PAS SA PLACE DEFINITIVE. La vraie maniere est le reglage natif d'Elementor, Reglages du site, Mise en page, Largeur du contenu, a passer de 1140 a 1440 : Elementor recalcule alors lui-meme ce qui en depend. Ce fichier fait la meme chose en CSS, le temps qu'on bascule le reglage, et il suffira de le retirer ensuite. Mesure du 08/10/2026 sur une fenetre de 1920 px : tout le site tenait dans 1140 px, avec 385 px de vide de chaque cote. Sur un 27 pouces en 2560, cela faisait environ 710 px de marge morte de part et d'autre. ⚠️ Rien ne bouge en dessous de 1140 px : il s'agit d'un maximum, pas d'une largeur imposee. Les telephones et les tablettes ne sont pas concernes. ⚠️ Verifie : aucune image du site n'est affichee au-dela de sa taille native a 1440 ni a 1560 px, sur les 38 images de l'accueil. Rien a refaire. ------------------------------------------------------------------------ */ /* L'en-tete maison porte sa largeur en dur : il faut lui retirer son width, sinon il reste a 1140 pendant que le contenu passe a 1440, et le decalage se voit immediatement. */ .grh-in{max-width:1440px!important;width:auto!important} .elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px} @media (min-width:1700px){ .grh-in{max-width:1560px!important} .elementor-section.elementor-section-boxed > .elementor-container{max-width:1560px} } /* La grille de produits WooCommerce de l'accueil garde 4 colonnes quelle que soit la largeur : a 1440 chaque case fait 341 px pour une piece de 150, donc beaucoup d'air et un bouton d'achat demesure. Le reglage propre est le nombre de colonnes du widget, dans Elementor ; en attendant, on redresse ici. */ @media (min-width:1300px){ .elementor-widget-wc-archive-products ul.products, .elementor-widget-woocommerce-products ul.products, .woocommerce ul.products{ display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:32px 24px} .woocommerce ul.products li.product{ width:auto!important;margin:0!important;float:none!important;clear:none!important} .woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important} } @media (min-width:1700px){ .elementor-widget-wc-archive-products ul.products, .elementor-widget-woocommerce-products ul.products, .woocommerce ul.products{grid-template-columns:repeat(6,1fr)!important} } /* ⚠️ NE JAMAIS elargir main.site-main en general : le bandeau de l'accueil y perd ses marges internes et son titre se colle au bord gauche. Verifie deux fois, les 08 et 09/10. On l'elargit UNIQUEMENT sur les pages qui portent la boutique, reperees par la classe grb-page posee en PHP. Le titre du theme et le fil d'Ariane s'alignent alors sur la grille, au lieu de rester en retrait. */ @media (min-width:1300px){ /* ⚠️ 09/10/2026. max-width SANS marges automatiques = contenu colle au bord gauche. Le gabarit du theme n'avait pas de largeur maximale : en lui en donnant une, il fallait aussi le recentrer, sinon l'en-tete et le pied de page restaient centres pendant que la boutique partait a gauche. */ body.grb-page main.site-main{max-width:1440px;margin-left:auto;margin-right:auto} } @media (min-width:1700px){ body.grb-page main.site-main{max-width:1560px;margin-left:auto;margin-right:auto} } /* --------------------------------------------------------------------------- 09/10/2026. Les pages qui ne sont pas construites avec Elementor restaient au gabarit du theme, 1140 px, pendant que l'en-tete et le pied de page tenaient 1560 : on voyait le decalage sur « Acheter de l'or », la FAQ, les mentions legales et l'espace client. Meme chose pour la colonne du kit .gra et pour le bloc d'avis de l'accueil, qui portent leur largeur en dur. ⚠️ L'accueil est exclu par :not(.elementor-page) : l'elargir colle le titre du bandeau au bord gauche. Verifie les 08 et 09/10. --------------------------------------------------------------------------- */ @media (min-width:1300px){ .grv-wrap{max-width:1440px!important} body:not(.elementor-page) main.site-main{max-width:1440px} .gra-col{max-width:1440px!important} .page-header .entry-title{max-width:1440px!important} } @media (min-width:1700px){ .grv-wrap{max-width:1560px!important} body:not(.elementor-page) main.site-main{max-width:1560px} .gra-col{max-width:1560px!important} .page-header .entry-title{max-width:1560px!important} } /* --------------------------------------------------------------------------- 09/10/2026. Le titre du theme, « h1.entry-title » dans « .page-header », reste le SEUL h1 de 24 pages : on ne le retire pas, on l'aligne. Il etait cale sur l'ancien gabarit de 1140 px et demarrait 210 px a droite du contenu. ⚠️ L'accueil est exclu : son bandeau se decale si on y touche. --------------------------------------------------------------------------- */ @media (min-width:1300px){ body:not(.home) .page-header{max-width:1440px;margin-left:auto;margin-right:auto} } @media (min-width:1700px){ body:not(.home) .page-header{max-width:1560px} } /* ⚠️ Le kit « .gra » est un extrait WPCode servi APRES cette feuille : a specificite egale il gagnait, d'ou les !important ci-dessus. Il porte .gra-col{max-width:1140px} et .page-header .entry-title{max-width:1140px}. */ /* --------------------------------------------------------------------------- 09/10/2026. Un extrait WPCode pose deja « .page-header .entry-title » et « .woocommerce » a 1140 px, en !important : a poids egal c'est lui qui gagnait, servi plus tard. On passe donc par un selecteur plus specifique, c'est la specificite qui tranche entre deux !important. ⚠️ Le panier et la commande ne sont PAS elargis : un formulaire de paiement a 1560 px de large se lit mal. Seul l'espace client l'est. --------------------------------------------------------------------------- */ @media (min-width:1300px){ body:not(.home) .page-header h1.entry-title{max-width:1440px!important} body.woocommerce-account .woocommerce{max-width:1440px!important; margin-left:auto!important;margin-right:auto!important} } @media (min-width:1700px){ body:not(.home) .page-header h1.entry-title{max-width:1560px!important} body.woocommerce-account .woocommerce{max-width:1560px!important} } /* --------------------------------------------------------------------------- 09/10/2026. Deux retouches demandees par Lucas. 1. Sur les pages qui portent la boutique, le titre du theme fait doublon : on lit « Boutique » en gris, puis « Accueil / Boutique » dans le fil d'Ariane, puis le vrai titre de la page. Pareil en anglais, « Gold and silver shop » suivi de « Home / Gold and silver shop ». ⚠️ On le retire de l'OEIL, pas du HTML : c'est le seul h1 de ces pages et Google doit continuer a le lire. Meme technique que celle deja employee sur ce site pour le titre des archives de categorie. Le titre visible reste le h2 de la page, « Achat or et argent... » / « Buy gold and silver... ». 2. La barre des cours respire davantage sur grand ecran. On ne touche QUE a l'espacement : la mecanique des cours est gelee depuis le 10/09. --------------------------------------------------------------------------- */ body.grb-page .page-header .entry-title{ position:absolute!important;width:1px!important;height:1px!important; margin:-1px!important;padding:0!important;overflow:hidden!important; clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important} body.grb-page .page-header{margin:0!important;padding:0!important} @media (min-width:1025px){ .grh-r1 .grh-c{gap:64px} .grh-r1 .grh-util{gap:22px} } /* =========================================================================== 09/10/2026 — RAPATRIEMENT DU CSS DU KIT ELEMENTOR. Ces regles vivaient dans Reglages du site > CSS personnalise. Elles sont remontees ici pour que TOUT ce qu'on a ecrit tienne dans une seule extension : une seule chose a installer, une seule a desactiver pour tout annuler. ⚠️ Le champ du kit a ete VIDE le meme jour. Ne pas y remettre ces regles : elles seraient servies deux fois, et le kit passant APRES cette feuille, c'est lui qui gagnerait sans qu'on comprenne pourquoi. =========================================================================== */ /* Menu centre entre le logo et les outils, entrees espacees de 38 px. ⚠️ NE PAS le sortir du flux en position absolue : la recherche et le bouton telephone remontent alors dessous et se superposent au menu. */ .grh-nav{flex:0 0 auto!important;margin-left:auto!important;margin-right:auto!important;gap:38px!important} /* Barre des cours sur grand ecran : 12,5 px etait trop discret pour un 27 pouces. Portee a 14,5 px, hauteur a 46 px. Le telephone n'est pas touche, il garde ses 10 px sur fond marine. */ @media (min-width:1025px){ .grh-r1{font-size:14.5px!important;height:46px!important;line-height:46px!important} .grh-r1 b,.grh-r1 strong{font-size:14.5px!important} } /* Fiche produit sur grand ecran. La photo n'est PAS agrandie : on la bride a sa taille native et on la centre, plutot que de l'etirer et de la rendre floue. La place gagnee va au texte de description, porte de 16 a 17,5 px. */ @media (min-width:1025px){ /* ⚠️ :not(.zoomImg) — la loupe de WooCommerce posait sa propre image en surcouche et en calculait la geometrie en JavaScript. En lui imposant 600 px de large alors qu'elle se donnait 800 px de haut, on l'ecrasait : source 800x800 rendue 600x800, deformee et floue au survol. Le zoom a depuis ete retire cote PHP, mais on garde l'exclusion : elle ne coute rien et protege si le support est reactive un jour. */ body.single-product .woocommerce-product-gallery img:not(.zoomImg), body.single-product .elementor-widget-woocommerce-product-images img:not(.zoomImg){ max-width:600px!important;margin-left:auto!important;margin-right:auto!important} /* Les vignettes prenaient 25 % de la galerie, soit 188 px : trop grosses a cote d'une photo de 600. Calees a 96 px. ⚠️ Le fichier derriere fait 300 px : on reduit, on n'agrandit pas. */ body.single-product .flex-control-thumbs li{width:96px!important;margin:0 10px 10px 0!important} body.single-product .flex-control-thumbs img{width:100%!important;height:auto!important} body.single-product .elementor-widget-text-editor, body.single-product .elementor-widget-theme-post-content, body.single-product .elementor-widget-woocommerce-product-content{ font-size:17.5px!important;line-height:30px!important} } /* Pied de page sur grand ecran. Les quatre colonnes remplissent deja toute la largeur, 355 px chacune de 245 a 1665 : il n'y a pas de vide a combler. Ce qui manquait, c'etait de l'air VERTICAL entre les liens, serres a 32 px, et des intertitres a 10,5 px trop discrets pour la nouvelle echelle. */ @media (min-width:1025px){ .elementor-location-footer .elementor-icon-list-item{margin-bottom:10px!important} .elementor-location-footer .elementor-icon-list-item a{font-size:16.5px!important} .elementor-location-footer h4, .elementor-location-footer h4 .elementor-heading-title{ font-size:12px!important;letter-spacing:.18em!important} } /* Prix de la fiche produit. Il s'affichait en #23A6F0, le bleu par defaut de WooCommerce, alors que la boutique affiche ses prix en #958E09. Le bleu n'est pas une couleur de marque : c'est un reste du theme par defaut, present sur environ 150 elements du site. Ici on remet le dore, sur toutes les largeurs. */ body.single-product .price, body.single-product .price .woocommerce-Price-amount, body.single-product .price .amount, body.single-product .price bdi{color:#958E09!important} /* =========================================================================== 09/10/2026. LE TITRE DU THEME DEVIENT UN VRAI TITRE DE PAGE. Il sortait en surtitre gris de 14 px, a l'origine pour coiffer un grand titre pose dans le contenu. Inventaire des 44 pages publiees : sur 18 d'entre elles le contenu commence par un PARAGRAPHE. Le surtitre gris y etait donc le seul titre de la page, et il avait l'air d'une ligne oubliee (signale par Lucas sur « Acheter de l'or », la FAQ, le contact). On lui donne le style du titre d'« A propos », la seule reference en grand du site : Mulish 500, 44 px, interligne 1,18. ⚠️ 28 px sur telephone et non 24 : les h2 du kit .gra y font 26 px, le titre de page doit rester au-dessus. Exceptions : - pages boutique (.grb-page) : titre masque, voir plus haut ; - accueil : pas touche ; - actualites FR (406) et EN (5705) : le contenu porte DEJA son propre h1, on masque donc celui du theme pour ne pas afficher le titre deux fois. =========================================================================== */ body:not(.home):not(.grb-page) .page-header h1.entry-title{ font-family:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important; font-weight:500!important;font-size:44px!important;line-height:1.18!important; color:#08092D!important;letter-spacing:normal!important;text-transform:none!important; margin:8px 0 24px!important} @media (max-width:767px){ body:not(.home):not(.grb-page) .page-header h1.entry-title{ font-size:28px!important;margin:4px 0 16px!important} } body.page-id-406 .page-header h1.entry-title, body.page-id-5705 .page-header h1.entry-title{ position:absolute!important;width:1px!important;height:1px!important; margin:-1px!important;padding:0!important;overflow:hidden!important; clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}