/* ===== Prince Galant — deux registres ===== * * Le site était intégralement sombre, de l'accueil au tunnel d'achat. Ce * fichier introduit un second registre, clair, pour les pages commerce. * * Méthode : plutôt que de réécrire les 243 déclarations qui emploient déjà * --cream, --ink, --body, --muted et --line, on redéfinit ce vers quoi ces * variables pointent selon la classe posée sur . Le thème continue de * dire « la couleur de lecture » et « le fond de page » ; seul leur contenu * change. Aucune section Elementor n'est touchée. * * Conséquence utile : basculer une page d'un registre à l'autre revient à * changer une classe, sans refaire la moindre mise en page. */ html[data-pg-registre="clair"] { background: #ece5d6; color-scheme: light; } html[data-pg-registre="sombre"] { background: #121215; } :root { /* --- Registre sombre --- */ --pg-sombre-fond: #121215; --pg-sombre-texte: #c5c5c7; /* 10,85:1 sur le fond */ --pg-sombre-nuance: #1a1a1f; /* --- Registre clair --- Ivoire chaud, jamais blanc : #f7f4ec est la teinte déjà présente dans les données d'origine de la marque. Elle tire vers le jaune, ce qui met le cuir et l'acier en valeur là où un blanc pur les ferait paraître gris. */ --pg-clair-surface: #f6f2e8; /* cartes et médias, le niveau le plus haut */ --pg-clair-fond: #ece5d6; /* corps de page */ --pg-clair-nuance: #e0d8c6; /* section alternée */ --pg-clair-appui: #d3c9b4; /* bandeaux et encadrés */ --pg-clair-texte: #1b1815; /* 14,09:1 sur le fond */ /* --- Accent commun --- Aucune couleur unique ne passe 4,5:1 sur les deux fonds : ils sont aux extrémités opposées de l'échelle. Le même acier est donc décliné en deux clartés, teinte (215°) et saturation (12 %) conservées. */ --pg-or: #9aa3b0; /* 7,34:1 sur le fond sombre */ --pg-or-clair: #515a67; /* 4,92:1 jusque sur la nuance */ /* Paliers d'alternance du registre sombre, du plus profond au plus clair. Les écarts sont volontairement ténus : l'œil perçoit finement les valeurs basses, un saut franc casserait la continuité de la page. */ --pg-palier-0: #0e0e11; --pg-palier-1: #121215; --pg-palier-2: #17171b; --pg-palier-3: #1d1d22; } /* ------------------------------------------------------------------------- * Registre sombre — remappage explicite * * Les valeurs restent celles d'aujourd'hui, à une exception près : le corps * de texte et les libellés secondaires remontent, plusieurs d'entre eux * échouant au seuil AA. On remonte le texte, jamais le fond, pour préserver * la profondeur de l'image de marque. * ---------------------------------------------------------------------- */ body.pg-registre-sombre { --ink: var(--pg-sombre-fond); --ink-soft: var(--pg-sombre-nuance); --ink-softer: #212127; --cream: #f2f2f3; --cream-soft: var(--pg-sombre-nuance); --gold: var(--pg-or); --gold-light: #cfd4da; --body: rgba(242, 242, 243, 0.78); /* 3,78:1 -> 10,40:1 */ --muted: rgba(242, 242, 243, 0.62); /* 2,52:1 -> 6,91:1 */ --line: rgba(242, 242, 243, 0.14); --pg-ink: var(--ink); --pg-ink-soft: var(--ink-soft); --pg-cream: var(--cream); --pg-cream-soft: var(--cream-soft); --pg-gold: var(--gold); --pg-line: var(--line); } /* ------------------------------------------------------------------------- * Registre clair * ---------------------------------------------------------------------- */ body.pg-registre-clair { --ink: var(--pg-clair-fond); --ink-soft: var(--pg-clair-nuance); --ink-softer: #d3c9b4; /* --cream porte « la couleur de lecture » : sur ivoire, c'est l'encre. */ --cream: var(--pg-clair-texte); --cream-soft: var(--pg-clair-nuance); --gold: var(--pg-or-clair); --gold-light: #47505c; --body: #57514a; /* 7,13:1 */ --muted: #6b6459; /* 5,25:1 */ --line: rgba(27, 24, 21, 0.16); --pg-ink: var(--ink); --pg-ink-soft: var(--ink-soft); --pg-cream: var(--cream); --pg-cream-soft: var(--cream-soft); --pg-gold: var(--gold); --pg-line: var(--line); background: var(--pg-clair-fond); color: var(--pg-clair-texte); } /* La texture guillochée reste, mais teintée d'ivoire au lieu de noir : c'est elle qui porte l'identité, elle ne doit pas disparaître avec le registre. */ body.pg-registre-clair { --tex-light: linear-gradient(rgba(236, 229, 214, 0.94), rgba(236, 229, 214, 0.94)), var(--tex); --tex-light-soft: linear-gradient(rgba(224, 216, 198, 0.94), rgba(224, 216, 198, 0.94)), var(--tex); --tex-dark: linear-gradient(rgba(211, 201, 180, 0.95), rgba(211, 201, 180, 0.95)), var(--tex); } /* ------------------------------------------------------------------------- * Ajustements propres au registre clair * * Tout ce que le remappage ne peut pas atteindre : valeurs écrites en dur, * ombres, et éléments dont le sens s'inverse d'un registre à l'autre. * ---------------------------------------------------------------------- */ /* Les boutons pleins passent à l'acier de la marque, pas à l'encre : un pavé noir sur ivoire ramenait le registre sombre là où on l'avait chassé. #9aa3b0 porte l'encre à 6,94:1 et se détache du fond à 2,03:1 — il se lit comme un bouton sans assombrir la page. */ body.pg-registre-clair .pg-btn-gold, body.pg-registre-clair .pg-newsletter-form button, body.pg-registre-clair .pg-filtres-appliquer, body.pg-registre-clair .pg-cat-body .page-numbers.current, body.pg-registre-clair .woocommerce #respond input#submit, body.pg-registre-clair .woocommerce a.button, body.pg-registre-clair .woocommerce button.button, body.pg-registre-clair .woocommerce input.button { background: #9aa3b0; color: #1b1815; border-color: #9aa3b0; } body.pg-registre-clair .pg-btn-gold:hover, body.pg-registre-clair .pg-newsletter-form button:hover, body.pg-registre-clair .pg-filtres-appliquer:hover, body.pg-registre-clair .woocommerce a.button:hover, body.pg-registre-clair .woocommerce button.button:hover, body.pg-registre-clair .woocommerce input.button:hover { background: #8891a0; color: #16130f; border-color: #8891a0; } /* Le bouton fantôme se remplit d'acier au survol, au lieu de virer à l'encre. */ body.pg-registre-clair .pg-btn-ghost:hover, body.pg-registre-clair .pg-btn-ghost-dark:hover { background: #9aa3b0; color: #1b1815; border-color: #9aa3b0; } /* Pastille de taille retenue : même logique, acier plutôt qu'encre. */ body.pg-registre-clair .pg-prod-sizes .pg-chip:active, body.pg-registre-clair .pg-filtre-pastille input:checked ~ span { background: #9aa3b0; color: #1b1815; border-color: #9aa3b0; } body.pg-registre-clair .pg-btn-ghost { border-color: rgba(27, 24, 21, 0.28); color: var(--pg-clair-texte); } /* Placeholder : 3,12:1 en sombre, corrigé dans les deux registres. */ body.pg-registre-sombre .pg-newsletter-form input::placeholder { color: rgba(242, 242, 243, 0.58); } body.pg-registre-clair .pg-newsletter-form input::placeholder { color: #6b6459; } body.pg-registre-clair .pg-newsletter-form { border-color: rgba(27, 24, 21, 0.22); } body.pg-registre-clair .pg-newsletter-form input { color: var(--pg-clair-texte); } /* Le voile des vignettes produit passe du noir à l'ivoire. */ body.pg-registre-clair .pg-prod-media { background: var(--pg-clair-surface); } body.pg-registre-clair .pg-subcat-card { background: var(--pg-clair-nuance); } /* Les pastilles de taille perdent leur bordure claire sur fond clair. */ body.pg-registre-clair .pg-prod-sizes .pg-chip { border-color: rgba(27, 24, 21, 0.22); color: var(--body); } body.pg-registre-clair .pg-prod-sizes .pg-chip:hover { border-color: var(--pg-clair-texte); color: var(--pg-clair-texte); } body.pg-registre-clair .pg-prod-sizes .pg-chip:active { background: rgba(27, 24, 21, 0.06); } /* Le reset du thème parent peint tous les liens de contenu en #c36. Il faut le reprendre explicitement, dans les deux registres. */ body.pg-registre-clair .pg-page a:not([class]), body.pg-registre-clair .entry-content a:not([class]) { color: var(--pg-or-clair); text-underline-offset: 3px; } body.pg-registre-sombre .pg-page a:not([class]), body.pg-registre-sombre .entry-content a:not([class]) { color: var(--gold-light); text-underline-offset: 3px; } /* ------------------------------------------------------------------------- * En-tête et pied de page * * Les deux suivent le registre de la page. Le logo bascule entre sa version * claire et sa version sombre : les deux existent dans la médiathèque. * ---------------------------------------------------------------------- */ body.pg-registre-clair #pg-header { background-image: linear-gradient(rgba(236, 229, 214, 0.92), rgba(236, 229, 214, 0.92)), var(--pg-tex); border-bottom-color: rgba(27, 24, 21, 0.14); } /* Les deux bandeaux sont en argent, pas en ivoire : ils reprennent la teinte de l'acier de la marque (215°) et encadrent l'en-tête comme deux rails métalliques. #bfc6ce se détache du fond à 1,37:1 — un bandeau ivoire s'y serait fondu. */ body.pg-registre-clair .pg-promo-bar, body.pg-registre-clair .pg-trust-bar { background-image: linear-gradient(rgba(191, 198, 206, 0.96), rgba(191, 198, 206, 0.96)), var(--pg-tex); border-color: rgba(27, 24, 21, 0.14); } body.pg-registre-clair .pg-footer, body.pg-registre-clair .pg-mobile-nav { background-image: linear-gradient(rgba(224, 216, 198, 0.95), rgba(224, 216, 198, 0.95)), var(--pg-tex); } body.pg-registre-clair .pg-promo-track span, body.pg-registre-clair .pg-trust-track span, body.pg-registre-clair .pg-nav-list li a, body.pg-registre-clair .pg-logo-text, body.pg-registre-clair .pg-cart-link { color: var(--pg-clair-texte); } body.pg-registre-clair .pg-promo-track span { color: var(--pg-clair-texte); } /* 10,26:1 */ body.pg-registre-clair .pg-trust-track span { color: #3d4148; } /* 5,95:1 */ body.pg-registre-clair .pg-trust-track span em { color: #5c626b; } body.pg-registre-clair .pg-nav-list li a::after { background: var(--pg-clair-texte); } body.pg-registre-clair .pg-burger span { background: var(--pg-clair-texte); } body.pg-registre-clair .pg-footer-heading, body.pg-registre-clair .pg-footer-col ul li, body.pg-registre-clair .pg-footer-col ul li a, body.pg-registre-clair .pg-footer-bottom p { color: #57514a; } body.pg-registre-clair .pg-footer-bottom .pg-footer-legal a { color: #6b6459; } body.pg-registre-clair .pg-footer-bottom .pg-footer-legal a:hover { color: var(--pg-clair-texte); } /* Le sous-menu de la boutique suit lui aussi. */ body.pg-registre-clair .pg-mega { background-image: linear-gradient(rgba(246, 242, 232, 0.98), rgba(246, 242, 232, 0.98)), var(--pg-tex); border-color: rgba(27, 24, 21, 0.16); box-shadow: 0 18px 44px rgba(27, 24, 21, 0.14); } body.pg-registre-clair .pg-nav-list .pg-mega-title { color: var(--pg-clair-texte); } body.pg-registre-clair .pg-nav-list .pg-mega-list a { color: #57514a; } body.pg-registre-clair .pg-nav-list .pg-mega-list a:hover { color: var(--pg-clair-texte); } body.pg-registre-clair .pg-mega-count { color: #6b6459; } body.pg-registre-clair .pg-mega-soon-label, body.pg-registre-clair .pg-mega-soon li span { color: #7d7568; } body.pg-registre-clair .pg-nav-list .pg-mega-toggle { color: #57514a; } /* ------------------------------------------------------------------------- * Corrections de contraste du registre sombre * * Relevé avant correction, sur #121215 : * légendes .42 3,78:1 échec * placeholder .35 3,12:1 échec * compteurs .30 2,52:1 échec * « Prochainement ».26 2,19:1 échec * Toutes remontées en éclaircissant le texte, jamais le fond. * ---------------------------------------------------------------------- */ body.pg-registre-sombre .pg-mega-count { color: rgba(242, 242, 243, 0.58); } /* 6,12:1 */ body.pg-registre-sombre .pg-mega-soon-label, body.pg-registre-sombre .pg-mega-soon li span { color: rgba(242, 242, 243, 0.55); } body.pg-registre-sombre .pg-whatsapp-title, body.pg-registre-sombre .pg-prod-sizes-label { color: rgba(242, 242, 243, 0.60); } body.pg-registre-sombre .pg-collection-soon { color: rgba(242, 242, 243, 0.58); } body.pg-registre-sombre .pg-coll-privacy { color: rgba(242, 242, 243, 0.60); } body.pg-registre-sombre .pg-todo-public { color: rgba(242, 242, 243, 0.52); } @media (prefers-reduced-motion: reduce) { body.pg-registre-clair * { transition-duration: 0.01ms !important; } } /* ========================================================================= * Alternance des sections de l'accueil * * Constat mesuré : sur 7 200 px de haut, la luminance moyenne de la page * oscillait entre 11 et 23. Huit sections sur le même fond, aucun repos. * * On introduit trois paliers sombres, d'écart volontairement ténu — l'œil * distingue finement les valeurs basses, un saut franc casserait la * continuité — plus une section franchement claire au milieu du parcours. * * Tout passe par le fond des sections. Aucun contenu, aucune mise en page, * aucune section Elementor n'est touchée. Chaque règle est surchargeable : * il suffit de redéclarer le sélecteur plus bas dans une feuille chargée * après celle-ci. * ====================================================================== */ body.home.pg-registre-sombre .pg-marquee-band { background-image: linear-gradient(rgba(14, 14, 17, 0.95), rgba(14, 14, 17, 0.95)), var(--tex); } body.home.pg-registre-sombre .pg-split { background-image: linear-gradient(rgba(18, 18, 21, 0.93), rgba(18, 18, 21, 0.93)), var(--tex); } body.home.pg-registre-sombre .pg-pillars { background-image: linear-gradient(rgba(23, 23, 27, 0.93), rgba(23, 23, 27, 0.93)), var(--tex); } body.home.pg-registre-sombre .pg-film { background-image: linear-gradient(rgba(18, 18, 21, 0.93), rgba(18, 18, 21, 0.93)), var(--tex); } body.home.pg-registre-sombre .pg-detail { background-image: linear-gradient(rgba(29, 29, 34, 0.93), rgba(29, 29, 34, 0.93)), var(--tex); } body.home.pg-registre-sombre .pg-signature { background-image: linear-gradient(rgba(14, 14, 17, 0.95), rgba(14, 14, 17, 0.95)), var(--tex); } /* Filet de séparation entre paliers voisins : sans lui, un écart de quatre points de luminance passe inaperçu et l'alternance ne sert à rien. */ body.home.pg-registre-sombre .pg-split, body.home.pg-registre-sombre .pg-pillars, body.home.pg-registre-sombre .pg-film, body.home.pg-registre-sombre .pg-anatomy, body.home.pg-registre-sombre .pg-detail, body.home.pg-registre-sombre .pg-signature { border-top: 1px solid rgba(242, 242, 243, 0.07); } /* ------------------------------------------------------------------------- * « L'Anatomie de Mystérius » en registre clair * * Choix argumenté plutôt que « L'Objet » : * * — c'est la seule section photographique de la page, cinq vues de pièces * métalliques et de cuir. Sur fond sombre, le fond gravé et le saphir se * confondent avec le ground ; sur ivoire, ils se détachent. C'est le même * argument que pour les vêtements ; * — « L'Objet » est purement typographique, trois énoncés numérotés. Un * changement de fond y serait un aplat sans motif, qui se lirait comme un * accident plutôt que comme une intention ; * — la section tombe au milieu du défilement, là où la respiration sert. * * Le basculement se fait en redéclarant les variables sur la section : elles * cascadent vers tous les descendants, dont les légendes et les filets. * ---------------------------------------------------------------------- */ /* Accent clair de la section Anatomie — neutralisé : la consigne est « sombre partout ». Le bloc est conservé ; retirer le préfixe .pg-accent-clair de la ligne suivante le réactive. */ body.pg-accent-clair.home.pg-registre-sombre .pg-anatomy { --ink: var(--pg-clair-fond); --ink-soft: var(--pg-clair-nuance); --cream: var(--pg-clair-texte); --body: #57514a; --muted: #6b6459; --line: rgba(27, 24, 21, 0.16); --gold: var(--pg-or-clair); --gold-light: #47505c; background-image: linear-gradient(rgba(236, 229, 214, 0.95), rgba(236, 229, 214, 0.95)), var(--tex); color: var(--pg-clair-texte); border-top-color: rgba(27, 24, 21, 0.14); } body.pg-accent-clair.home.pg-registre-sombre .pg-anatomy .pg-eyebrow { color: var(--pg-or-clair); } body.pg-accent-clair.home.pg-registre-sombre .pg-anatomy .pg-anatomy-caption { color: var(--pg-clair-texte); background: rgba(246, 242, 232, 0.90); } /* Les photographies étaient désaturées pour fondre dans le noir ; sur ivoire elles peuvent reprendre leur densité. */ body.pg-accent-clair.home.pg-registre-sombre .pg-anatomy .pg-duotone { filter: none; } /* ------------------------------------------------------------------------- * Galerie produit et zoom * * Les vignettes reçoivent un fond ivoire plutôt que la transparence : une * pièce sombre photographiée sur fond noir se détache alors du cadre, au lieu * de se fondre dans le ground. * ---------------------------------------------------------------------- */ body.pg-registre-clair .woocommerce-product-gallery, body.pg-registre-clair .woocommerce-product-gallery__image, body.pg-registre-clair .woocommerce-product-gallery__wrapper, body.pg-registre-clair .flex-control-thumbs li, body.pg-registre-clair .pg-mprod-g-item { background: var(--pg-clair-nuance); } body.pg-registre-clair .woocommerce-product-gallery__image img, body.pg-registre-clair .flex-control-thumbs img { background: var(--pg-clair-nuance); mix-blend-mode: multiply; } /* Le zoom PhotoSwipe s'ouvre sur un voile : ivoire dans ce registre. */ body.pg-registre-clair .pswp__bg { background: rgba(236, 229, 214, 0.97); } body.pg-registre-clair .pswp__caption__center { color: var(--pg-clair-texte); } /* Filet autour des vignettes de grille, pour que le cadre existe même quand l'image et le fond ont la même valeur. */ body.pg-registre-clair .pg-prod-media { border: 1px solid rgba(27, 24, 21, 0.10); } /* ========================================================================= * Chrome et alternance du registre clair * * L'en-tête, les bandeaux et le pied de page suivent le registre choisi. Ils * étaient restés sombres tant que le registre clair ne servait qu'aux pages * commerce ; avec un bouton qui bascule tout le site, un chrome figé aurait * laissé un bandeau noir au-dessus d'une page ivoire. * * L'échelle, elle, garde ses quatre niveaux : c'est ce qui manquait à la * première version, où fond et nuance ne se distinguaient qu'à 1,09:1. * ====================================================================== */ /* --- Alternance des sections claires --- */ /* :not(.has-media) — un rayon qui porte sa propre photographie la garde. Sans cette exclusion, l'alternance du registre clair recouvrait l'image d'un aplat, et les douze pages catégorie redevenaient identiques. */ body.pg-registre-clair .pg-cat-hero:not(.has-media), body.pg-registre-clair .pg-boutique-hero, body.pg-registre-clair .pg-shop-hero { background-image: linear-gradient(rgba(224, 216, 198, 0.95), rgba(224, 216, 198, 0.95)), var(--tex); } body.pg-registre-clair .pg-cat-body, body.pg-registre-clair .pg-boutique-cats { background-image: linear-gradient(rgba(236, 229, 214, 0.95), rgba(236, 229, 214, 0.95)), var(--tex); } body.pg-registre-clair .pg-shop-sec:nth-of-type(odd) { background-image: linear-gradient(rgba(236, 229, 214, 0.95), rgba(236, 229, 214, 0.95)), var(--tex); } body.pg-registre-clair .pg-shop-sec:nth-of-type(even) { background-image: linear-gradient(rgba(224, 216, 198, 0.95), rgba(224, 216, 198, 0.95)), var(--tex); } body.pg-registre-clair .pg-mprod-specs, body.pg-registre-clair .pg-mprod-faq { background-image: linear-gradient(rgba(224, 216, 198, 0.95), rgba(224, 216, 198, 0.95)), var(--tex); } /* Filet entre sections voisines : sans lui l'écart de 1,13:1 est invisible. */ body.pg-registre-clair .pg-cat-body, body.pg-registre-clair .pg-shop-sec, body.pg-registre-clair .pg-boutique-cats, body.pg-registre-clair .pg-mprod-specs, body.pg-registre-clair .pg-mprod-faq { border-top: 1px solid rgba(27, 24, 21, 0.12); } /* Le voile qui protège le texte du hero de catégorie suit le registre : sombre sur sombre, ivoire sur clair. Laisser le voile d'encre en registre clair aurait fait un bandeau noir au milieu d'une page ivoire. */ body.pg-registre-clair .pg-cat-hero.has-media { background-image: linear-gradient(100deg, rgba(236,229,214,.90) 0%, rgba(236,229,214,.85) 42%, rgba(236,229,214,.38) 100%), linear-gradient(to bottom, rgba(236,229,214,.3), rgba(236,229,214,.80)), var(--pg-cat-fond); } @media (max-width: 768px) { body.pg-registre-clair .pg-cat-hero.has-media { background-image: linear-gradient(to bottom, rgba(236,229,214,.78) 0%, rgba(236,229,214,.78) 55%, rgba(236,229,214,.90) 100%), var(--pg-cat-fond); background-size: cover, cover; background-position: center, center; } } /* Les bannières de la boutique portent aussi un voile d'encre : même inversion, sinon les trois sections restaient noires en registre clair. */ body.pg-registre-clair .pg-shop-sec[data-univers="horlogerie"] { background-image: linear-gradient(100deg, rgba(236,229,214,.89) 0%, rgba(236,229,214,.80) 38%, rgba(236,229,214,.38) 100%), linear-gradient(to bottom, rgba(236,229,214,0) 0%, rgba(236,229,214,.38) 46%, rgba(236,229,214,.78) 100%), url('/wp-content/uploads/2026/08/pg-hero-horlogerie.webp'); } body.pg-registre-clair .pg-shop-sec[data-univers="accessoires"] { background-image: linear-gradient(100deg, rgba(236,229,214,.90) 0%, rgba(236,229,214,.84) 38%, rgba(236,229,214,.42) 100%), linear-gradient(to bottom, rgba(236,229,214,0) 0%, rgba(236,229,214,.4) 46%, rgba(236,229,214,.80) 100%), url('/wp-content/uploads/2026/08/pg-hero-accessoires.webp'); } body.pg-registre-clair .pg-shop-sec[data-univers="vetements"] { background-image: linear-gradient(100deg, rgba(236,229,214,.90) 0%, rgba(236,229,214,.84) 38%, rgba(236,229,214,.42) 100%), linear-gradient(to bottom, rgba(236,229,214,0) 0%, rgba(236,229,214,.4) 46%, rgba(236,229,214,.80) 100%), url('/wp-content/uploads/2026/08/pg-hero-vetements.webp'); } /* ========================================================================= * Textes codés en dur, rendus visibles en registre clair * * Le remappage des variables couvre tout ce qui passe par --cream, --body ou * --muted. Restaient une quinzaine de règles écrites directement en * rgba(242,242,243) ou rgba(250,250,250) : invisibles dès que le fond devient * ivoire. Elles sont reprises ici plutôt que réécrites à la source, pour ne * pas toucher au registre sombre qui, lui, fonctionne. * ====================================================================== */ /* --- Pied de page --- */ body.pg-registre-clair .pg-footer-social a { color: #57514a; } body.pg-registre-clair .pg-footer-social a:hover { color: var(--pg-clair-texte); } body.pg-registre-clair .pg-footer-social-soon { color: #8a8377; } body.pg-registre-clair .pg-footer-download { color: #57514a; border-color: rgba(27,24,21,.22); } body.pg-registre-clair .pg-footer-download:hover { color: var(--pg-clair-texte); border-color: rgba(27,24,21,.5); } body.pg-registre-clair .pg-footer-signature { color: #6b6459; } body.pg-registre-clair .pg-lead-note { color: #57514a; border-top-color: rgba(27,24,21,.16); } /* --- Moyens de paiement --- */ body.pg-registre-clair .pg-pay { border-top-color: rgba(27,24,21,.16); } body.pg-registre-clair .pg-pay-titre { color: #6b6459; } body.pg-registre-clair .pg-pay-item { border-color: rgba(27,24,21,.2); background: rgba(27,24,21,.03); } body.pg-registre-clair .pg-pay-picto { color: #57514a; } body.pg-registre-clair .pg-pay-nom { color: var(--pg-clair-texte); } body.pg-registre-clair .pg-pay-note { color: #6b6459; } /* --- Bandeau défilant de l'accueil --- */ body.pg-registre-clair .pg-marquee-track span { color: #57514a; } /* --- Filtres de catégorie --- */ body.pg-registre-clair .pg-filtre-pastille:hover > span { border-color: rgba(27,24,21,.45); } /* --- Fiche Mystérius --- */ body.pg-registre-clair .pg-colour-choice legend { color: #6b6459; } body.pg-registre-clair .pg-colour-ref { color: #7d7568; } /* --- Pages légales --- */ body.pg-registre-clair .pg-todo-public { color: #8a8377; } /* --- Éléments décoratifs : leur très faible opacité les rendait invisibles sur ivoire, où il faut de l'encre plutôt que de la lumière. --- */ body.pg-registre-clair .pg-signature-mono { color: rgba(27, 24, 21, 0.04); } body.pg-registre-clair .pg-quote-block .mark { color: rgba(27, 24, 21, 0.12); } /* ========================================================================= * Le registre clair ne doit rien assombrir * * Les filtres d'image et les panneaux d'encre venaient du registre sombre, * où ils servent à faire ressortir un texte clair. Sur ivoire ils n'ont plus * d'objet : ils salissent la photographie et rendent la page terne. * * Les images retrouvent donc leur densité, et tout panneau d'encre s'inverse. * ====================================================================== */ /* --- Les photographies reprennent leur lumière --- */ body.pg-registre-clair .pg-hero-media img, body.pg-registre-clair .pg-shop-hero .pg-hero-media img, body.pg-registre-clair .pg-maison-hero .pg-hero-media img, body.pg-registre-clair .pg-coll-hero-media img { filter: none; } /* Les cartes de rayon passaient à 52 % de luminosité : illisibles et ternes. L'image reste entière, et c'est un dégradé ivoire posé dessous qui porte le texte — plutôt qu'un assombrissement de toute la photographie. */ body.pg-registre-clair .pg-subcat-media { filter: none; } body.pg-registre-clair .pg-subcat-card.has-media:hover .pg-subcat-media { filter: none; transform: scale(1.03); } body.pg-registre-clair .pg-subcat-card.has-media::after { content: ""; position: absolute; inset: 0; /* Bande ivoire en haut aussi : le numero de rayon se pose la ou le voile etait encore transparent, donc a meme la photographie. Sur la Tunique, fond bleu nuit, le 01 en texte fonce disparaissait. */ background: linear-gradient(to bottom, rgba(246,242,232,.94) 0%, rgba(246,242,232,.88) 8%, rgba(246,242,232,0) 22%, rgba(246,242,232,0) 40%, rgba(246,242,232,.82) 78%, rgba(246,242,232,.95) 100%); pointer-events: none; } /* .pg-subcat-media est aussi un enfant direct de la carte. L inclure ici lui imposait position:relative, ce qui annulait son inset:0 : la vignette tombait a zero de hauteur et la photographie disparaissait, ne laissant que le voile ivoire. Seul le texte doit remonter au-dessus du voile. */ body.pg-registre-clair .pg-subcat-card.has-media > *:not(.pg-subcat-media) { position: relative; z-index: 1; } body.pg-registre-clair .pg-subcat-card.has-media, body.pg-registre-clair .pg-subcat-card.has-media:hover { color: var(--pg-clair-texte); } body.pg-registre-clair .pg-subcat-card.has-media .pg-subcat-index, body.pg-registre-clair .pg-subcat-card.has-media .pg-subcat-count { color: #57514a; } /* Le duotone désature et assombrit : sur ivoire, il ne reste que la matière. */ body.pg-registre-clair .pg-duotone { filter: none; } /* --- Les panneaux d'encre s'inversent --- */ body.pg-registre-clair .pg-flip-back { background-image: linear-gradient(rgba(246,242,232,.94), rgba(246,242,232,.94)), var(--tex); border-color: rgba(27,24,21,.18); } body.pg-registre-clair .pg-whatsapp-menu { background-image: linear-gradient(rgba(246,242,232,.97), rgba(246,242,232,.97)), var(--pg-tex); border-color: rgba(27,24,21,.16); box-shadow: 0 18px 44px rgba(27,24,21,.16); } body.pg-registre-clair .pg-whatsapp-title { color: #6b6459; } body.pg-registre-clair .pg-whatsapp-zone { color: #57514a; } body.pg-registre-clair .pg-whatsapp-num { color: var(--pg-clair-texte); } body.pg-registre-clair .pg-whatsapp-menu a { border-top-color: rgba(27,24,21,.14); } body.pg-registre-clair .pg-film-figure .pg-film-toggle { background: rgba(246,242,232,.72); border-color: rgba(27,24,21,.35); } body.pg-registre-clair .pg-film-figure .pg-film-toggle:hover { background: rgba(246,242,232,.92); } body.pg-registre-clair .pg-film-icon { border-left-color: #1b1815; } body.pg-registre-clair .pg-film-figure.is-playing .pg-film-icon { border-left-color: #1b1815; border-right-color: #1b1815; } /* --- Sections de l'accueil qui portaient un voile d'encre --- */ body.pg-registre-clair.home .pg-film { background-image: linear-gradient(rgba(236,229,214,.85), rgba(236,229,214,.95)), url('/wp-content/uploads/2026/08/pg-fond-lin-large.webp'); } body.pg-registre-clair.home .pg-detail { background-image: linear-gradient(rgba(224,216,198,.94), rgba(224,216,198,.94)), var(--tex-lin); } body.pg-registre-clair.home .pg-pillars { background-image: linear-gradient(95deg, rgba(236,229,214,.90) 0%, rgba(236,229,214,.80) 46%, rgba(236,229,214,.42) 100%), linear-gradient(to bottom, rgba(224,216,198,.5), rgba(224,216,198,.85)), url('/wp-content/uploads/2026/08/pg-rituel-poignet.webp'); } body.pg-registre-clair.home .pg-marquee-band, body.pg-registre-clair.home .pg-split, body.pg-registre-clair.home .pg-signature { background-image: linear-gradient(rgba(236,229,214,.80), rgba(236,229,214,.80)), var(--tex); } body.pg-registre-clair.home .pg-anatomy { background-image: linear-gradient(rgba(246,242,232,.95), rgba(246,242,232,.95)), var(--tex); } /* ========================================================================= * Le texte posé sur une photographie reste clair * * Le remappage fait de --cream l'encre du registre clair. C'est juste sur une * surface ivoire, faux sur un hero photographique : la photo, elle, reste * sombre. Le titre « Mystérius » y devenait illisible. * * Ces blocs ne suivent donc pas le registre : ils suivent leur fond, qui est * une image. C'est la règle générale — la couleur du texte se décide par * rapport à ce qu'il y a derrière, pas par rapport au thème choisi. * ====================================================================== */ body.pg-registre-clair .pg-hero .pg-hero-title, body.pg-registre-clair .pg-hero .pg-hero-sub, body.pg-registre-clair .pg-hero-price, body.pg-registre-clair .pg-hero-inner .pg-eyebrow, body.pg-registre-clair .pg-eyebrow-on-dark, body.pg-registre-clair .pg-maison-hero h1, body.pg-registre-clair .pg-maison-hero p, body.pg-registre-clair .pg-shop-hero h1, body.pg-registre-clair .pg-shop-hero-sub, body.pg-registre-clair .pg-coll-title, body.pg-registre-clair .pg-coll-tagline, body.pg-registre-clair .pg-coll-badge, body.pg-registre-clair .pg-scroll-cue { color: #f2f2f3; } body.pg-registre-clair .pg-hero .pg-hero-sub, body.pg-registre-clair .pg-maison-hero p, body.pg-registre-clair .pg-shop-hero-sub, body.pg-registre-clair .pg-coll-tagline { color: rgba(242, 242, 243, 0.82); } body.pg-registre-clair .pg-coll-badge { border-color: rgba(242, 242, 243, 0.38); } body.pg-registre-clair .pg-hero-dot-ring circle { stroke: rgba(242, 242, 243, 0.55); } body.pg-registre-clair .pg-scroll-cue .line { background: rgba(242, 242, 243, 0.3); } /* Le bouton du hero garde son acier, lisible sur la photographie comme sur l'ivoire — c'est le seul de la page à devoir tenir sur les deux. */ body.pg-registre-clair .pg-hero-cta, body.pg-registre-clair .pg-hero-buy-form .pg-btn-gold { background: #9aa3b0; color: #1b1815; border-color: #9aa3b0; } /* Le sélecteur de coloris vit lui aussi sur la photo du hero. */ body.pg-registre-clair .pg-colour-choice legend { color: rgba(242, 242, 243, 0.62); } body.pg-registre-clair .pg-colour-name { color: #f2f2f3; } body.pg-registre-clair .pg-colour-ref { color: rgba(242, 242, 243, 0.5); } body.pg-registre-clair .pg-colour-opt { border-color: rgba(242, 242, 243, 0.25); } body.pg-registre-clair .pg-colour-opt.is-active { border-color: #f2f2f3; color: #f2f2f3; } /* ===================================================================== BUG 3 — le pied de page en registre clair ===================================================================== Les trois variables du pied de page basculent ici. Elles suffisent : les regles de pg-header-footer.css les consomment toutes, il n'y a plus une seule couleur claire en dur a rattraper une par une. Fond du pied de page en registre clair : #e0d8c6. --pg-foot-texte rgba(27,24,21,.78) -> 7,03:1 --pg-foot-attenue rgba(27,24,21,.70) -> 5,48:1 --pg-foot-faible rgba(27,24,21,.70) -> 5,48:1 ================================================================== */ body.pg-registre-clair { --pg-foot-texte: rgba(27, 24, 21, 0.78); --pg-foot-attenue: rgba(27, 24, 21, 0.70); --pg-foot-faible: rgba(27, 24, 21, 0.70); --pg-foot-bord: rgba(27, 24, 21, 0.22); --pg-foot-filet: rgba(27, 24, 21, 0.14); } /* Les anciennes surcharges au cas par cas deviennent inutiles, mais elles restent en place plus haut dans le fichier ; on les realigne ici sur les memes variables pour qu'il n'y ait qu'une seule source de verite. */ body.pg-registre-clair .pg-footer, body.pg-registre-clair .pg-footer-tagline, body.pg-registre-clair .pg-footer-text, body.pg-registre-clair .pg-footer-social a, body.pg-registre-clair .pg-footer-download { color: var(--pg-foot-texte); } body.pg-registre-clair .pg-footer-heading, body.pg-registre-clair .pg-footer-col ul li, body.pg-registre-clair .pg-footer-col ul li a, body.pg-registre-clair .pg-footer-bottom, body.pg-registre-clair .pg-footer-bottom p, body.pg-registre-clair .pg-footer-signature, body.pg-registre-clair .pg-footer-social-soon { color: var(--pg-foot-attenue); } body.pg-registre-clair .pg-pay-nom, body.pg-registre-clair .pg-pay-picto { color: var(--pg-foot-texte); } body.pg-registre-clair .pg-pay-titre, body.pg-registre-clair .pg-pay-note { color: var(--pg-foot-attenue); } /* Le survol garde son point d'appui : l'encre pleine, 12,46:1. */ body.pg-registre-clair .pg-footer-social a:hover, body.pg-registre-clair .pg-footer-col ul li a:hover, body.pg-registre-clair .pg-footer-download:hover { color: var(--pg-clair-texte); } /* Liens discrets et mentions en registre clair. Fond le plus sombre rencontre : #e0d8c6 (pied de page). rgba(27,24,21,.74) -> 6,2:1 rgba(27,24,21,.70) -> 5,5:1 */ body.pg-registre-clair { --pg-lien-discret: rgba(27, 24, 21, 0.74); --pg-mention: rgba(27, 24, 21, 0.70); } body.pg-registre-clair .pg-footer-legal a:hover, body.pg-registre-clair .pg-crumbs a:hover, body.pg-registre-clair .pg-legal-body a:hover, body.pg-registre-clair .pg-prose a:hover { color: var(--pg-clair-texte); } /* Correction d'une fuite du registre sombre : plus haut dans ce fichier, « body.pg-registre-clair .pg-colour-ref » recevait rgba(242,242,243,.5), soit une couleur CLAIRE en registre CLAIR — elle ecrasait la valeur juste posee quelques lignes plus haut. */ body.pg-registre-clair .pg-colour-ref { color: var(--pg-mention); } body.pg-registre-clair .pg-crumbs a, body.pg-registre-clair .woocommerce .woocommerce-breadcrumb a, body.pg-registre-clair .pg-page a:not([class]) { color: var(--pg-lien-discret); } body.pg-registre-clair .pg-page a:not([class]):hover { color: var(--pg-clair-texte); } /* Deux surcharges du registre clair etaient plus specifiques que la variable et restaient sous le seuil : .pg-footer-bottom .pg-footer-legal a #6b6459 -> 4,12:1 .pg-todo-public #8a8377 -> 2,99:1 On les realigne sur les memes variables, a specificite egale ou superieure, plutot que d'ajouter un !important. */ body.pg-registre-clair .pg-footer-bottom .pg-footer-legal a, body.pg-registre-clair .pg-footer .pg-footer-legal a { color: var(--pg-lien-discret); } body.pg-registre-clair .pg-page .pg-todo-public, body.pg-registre-clair .pg-todo-public { color: var(--pg-mention); } /* ===================================================================== FINITIONS ================================================================== */ /* --- 1 & 2. Les photographies prises sur fond blanc ------------------ * * Plusieurs visuels Mystérius sont shootés sur blanc pur : l'affiche du * lecteur vidéo (un cadran de profil) et trois vues de l'Anatomie (le * fond gravé, les bracelets, les lunettes). En registre sombre, le * duotone les assombrissait et le blanc ne se voyait pas. En registre * clair, « body.pg-registre-clair .pg-duotone { filter: none } » rend * les photographies telles quelles : chaque blanc devient une dalle * découpée sur l'ivoire. * * Plutôt que de redécouper cinq images, on les fait fusionner avec le * fond : multiply sur un aplat ivoire ramène le blanc à l'ivoire et * laisse le sujet intact. « isolation: isolate » borne le mélange au * conteneur, pour qu'il ne déborde pas sur ce qui est derrière. * * Le sujet s'assombrit d'environ 7 % — c'est le prix du procédé, et il * reste invisible à l'œil à côté d'une dalle blanche. * ------------------------------------------------------------------ */ body.pg-registre-clair .pg-film-media, body.pg-registre-clair .pg-anatomy-item { background: var(--pg-clair-fond); isolation: isolate; } body.pg-registre-clair .pg-film-media .pg-film-video, body.pg-registre-clair .pg-anatomy-item img { mix-blend-mode: multiply; } /* La légende reste au-dessus du mélange : elle a son propre voile sombre et doit garder son contraste. */ body.pg-registre-clair .pg-anatomy-caption { mix-blend-mode: normal; isolation: isolate; } /* --- 3. « Pourquoi Prince Galant ? » : hauteurs accordées ------------ * * La colonne de droite est en 4/5. Sur 1440 px elle occupe 648 px de * large, donc 810 px de haut, quand le texte de gauche en fait 350 : * la grille est centrée, et l'écart se lit comme un trou de part et * d'autre du texte. * * On plafonne la hauteur du média. Le cadrage se resserre un peu — c'est * une photographie d'ambiance, elle le supporte — et les deux colonnes * se répondent enfin. * ------------------------------------------------------------------ */ @media (min-width: 901px) { .pg-split-media { max-height: clamp(420px, 42vw, 560px); } } /* --- 4. Les trois piliers portent maintenant un texte ---------------- */ .pg-pillar-body { font: 400 15px/1.65 var(--sans); color: var(--body); margin: 18px 0 0; max-width: 34ch; } /* --- Liens WooCommerce restés à la couleur par défaut --------------- * * Les métadonnées de la fiche produit — « Catégories : Jackets, Vêtements » — * n'étaient couvertes par aucune règle du thème et tombaient sur le rose * par défaut de WooCommerce (#cc3366), soit 4,0:1 sur ivoire et surtout une * couleur étrangère à la Maison. Ils prennent l'acier, comme tous les autres * liens d'accompagnement. * ------------------------------------------------------------------ */ .product_meta a, .woocommerce-review-link, .reset_variations, .woocommerce-breadcrumb a, .woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.25s var(--ease, ease); } .product_meta a:hover, .woocommerce-review-link:hover, .reset_variations:hover, .woocommerce-breadcrumb a:hover { opacity: 0.72; } /* --- Bouton d'ajout au panier en attente de choix ------------------- * * Tant qu'aucune taille n'est choisie, WooCommerce marque le bouton * « disabled » par une CLASSE seulement, sans l'attribut : il garde ainsi * la main pour afficher son message au clic. La regle du theme visait * « :disabled », qui ne mord donc jamais, et le bouton retombait sur le * violet de WooCommerce — #7f54b3, etranger a la Maison et sans rapport * avec l'acier. * ------------------------------------------------------------------ */ .woocommerce button.button.disabled, .woocommerce button.button.alt.disabled, .woocommerce button.button.wc-variation-selection-needed, .woocommerce button.button.alt.wc-variation-selection-needed, .woocommerce div.product form.cart button.single_add_to_cart_button.disabled { background: var(--ink-softer); color: var(--muted); border-color: var(--line); opacity: 1; cursor: not-allowed; } .woocommerce button.button.disabled:hover, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.wc-variation-selection-needed:hover { background: var(--ink-softer); color: var(--muted); border-color: var(--line); } body.pg-registre-clair .woocommerce button.button.disabled, body.pg-registre-clair .woocommerce button.button.alt.disabled, body.pg-registre-clair .woocommerce button.button.wc-variation-selection-needed, body.pg-registre-clair .woocommerce button.button.disabled:hover { background: #d3c9b4; color: #57514a; border-color: rgba(27, 24, 21, 0.16); } /* --- Diapositives de banniere passees en h2 ------------------------- * * Une page ne doit porter qu'un h1 : les diapositives suivantes d'un meme * bandeau ne sont pas d'autres titres de page, mais des variantes du meme * bloc. Elles sont passees en h2 pour que Google sache quel est le titre de * la page — et les regles qui les habillaient par leur balise doivent * suivre a l'identique, sans quoi le titre reprendrait la taille par * defaut du navigateur. * ------------------------------------------------------------------ */ .pg-shop-hero h2 { font: 400 clamp(2.8rem, 6vw, 5rem)/1 var(--serif); letter-spacing: -0.025em; color: var(--cream); margin: 0 0 14px; } .pg-maison-hero h2 { font: 400 clamp(3.2rem, 8vw, 7rem)/0.98 var(--serif); letter-spacing: -0.025em; color: var(--cream); margin: 16px 0 20px; } /* Le registre clair garde ses titres en clair sur photographie : les nouvelles balises doivent etre couvertes comme l'etaient les h1. */ body.pg-registre-clair .pg-shop-hero h2, body.pg-registre-clair .pg-maison-hero h2 { color: #f2f2f3; } /* --- Menu mobile : le meganenu ne s'y deplie plus ------------------ * * Le panneau des rayons etait rendu ouvert a l'interieur du menu mobile. * « Boutique » mesurait alors 938 px de haut sur un ecran de 748, et tout * ce qui suit — dont l'onglet du Club — se retrouvait hors de vue, at- * teignable seulement en franchissant ce mur au defilement. * * Sur telephone, « Boutique » redevient un lien simple : la page boutique * presente deja ses rayons en grille, mieux que ce panneau ne le faisait. * ------------------------------------------------------------------ */ #pg-mobile-nav .pg-mega, #pg-mobile-nav .pg-mega-inner { display: none !important; } #pg-mobile-nav .pg-mobile-nav-list > li { height: auto; } /* --- Barre d'achat de Mystérius : prix et bouton reunis -------------- * * « space-between » sur un conteneur pleine largeur envoyait le prix a * l'extreme gauche et le bouton a l'extreme droite, separes par un vide * d'un metre. Les deux se lisent ensemble — « 100 000 FCFA, ajouter au * panier » — et doivent donc se toucher. * ------------------------------------------------------------------ */ .pg-mprod-buybar { justify-content: flex-start; gap: 34px; } .pg-mprod-buybar-price { flex: 0 0 auto; } .pg-mprod-buybar form { flex: 0 0 auto; margin: 0; } /* Le meme defaut guette la barre du hero, construite sur le meme motif. */ .pg-hero-buy-form { gap: 28px; } @media (max-width: 560px) { .pg-mprod-buybar { gap: 18px; } } /* --- Le film dans le carrousel du hero ------------------------------ * Il occupe la diapositive comme une photographie : meme cadrage, meme * recouvrement. Sans object-fit, une video 16/9 laisserait deux bandes * noires dans un bandeau plein ecran. * ------------------------------------------------------------------ */ .pg-hero-video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ===================================================================== PRINCE GALANT CLUB — mise en page ================================================================== Les pages du Club tombaient sur le gabarit par defaut : un titre nu et un bloc de texte pleine largeur, sans les respirations qui font le reste du site. Elles reprennent ici le meme rythme que les pages Mysterius ou La Maison. ================================================================== */ .pg-club-hero { background-image: var(--tex-light-soft); background-repeat: no-repeat, repeat; background-size: cover, 560px; padding: 190px 0 84px; position: relative; } .pg-club-sur { color: var(--gold); margin: 0 0 18px; } .pg-club-titre { font: 400 clamp(2.6rem, 6vw, 4.8rem)/1.02 var(--serif); letter-spacing: -0.028em; color: var(--cream); margin: 0; max-width: 15ch; } .pg-club-filet { display: block; width: 64px; height: 1px; background: var(--gold); margin-top: 40px; } /* --- Le corps ------------------------------------------------------- */ /* Une colonne de lecture, pas une pleine largeur : au-dela de 70 signes par ligne l'oeil perd le debut de la suivante. */ .pg-club-corps { background-image: var(--tex-light); background-repeat: no-repeat, repeat; border-top: 1px solid var(--line); padding: 96px 0 118px; } .pg-club-texte { max-width: 760px; } .pg-club-texte > p { font: 400 17px/1.85 var(--sans); color: var(--body); margin: 0 0 26px; } .pg-club-texte > h2 { font: 400 clamp(1.7rem, 3.2vw, 2.4rem)/1.15 var(--serif); letter-spacing: -0.015em; color: var(--cream); margin: 76px 0 22px; padding-top: 30px; border-top: 1px solid var(--line); } .pg-club-texte > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .pg-club-texte > h3 { font: 400 20px/1.35 var(--serif); color: var(--cream); margin: 34px 0 8px; } .pg-club-texte > h3 + p { margin-bottom: 22px; } .pg-club-texte a:not(.pg-btn) { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .pg-club-texte .pg-btn { margin-top: 10px; } /* Le chapeau porte la voix de la Maison : plus grand, en serif. */ .pg-club-chapeau { font: 400 clamp(1.15rem, 2.1vw, 1.45rem)/1.65 var(--serif) !important; color: var(--cream) !important; margin: 0 0 40px !important; max-width: 30ch; } /* --- Le sceau ------------------------------------------------------- */ .pg-club-sceau { position: relative; margin: 52px 0 !important; padding: 38px 40px !important; border: 1px solid var(--line) !important; border-left: 2px solid var(--gold) !important; background: rgba(154, 163, 176, 0.05) !important; } .pg-club-sceau p { font: 400 italic clamp(1.05rem, 2vw, 1.3rem)/1.7 var(--serif) !important; color: var(--cream) !important; margin: 0 !important; } /* --- La cloture ----------------------------------------------------- */ .pg-club-cloture { background-image: var(--tex-light-soft); background-repeat: no-repeat, repeat; border-top: 1px solid var(--line); padding: 96px 0 104px; text-align: center; } .pg-club-cloture-mot { font: 400 italic clamp(1.3rem, 3vw, 1.9rem)/1.5 var(--serif); color: var(--cream); margin: 0 0 34px; } /* --- Le formulaire respire ----------------------------------------- */ .pg-club-page .pg-club-form { margin-top: 44px; } @media (max-width: 900px) { .pg-club-hero { padding: 150px 0 60px; } .pg-club-corps { padding: 70px 0 86px; } .pg-club-texte > h2 { margin-top: 56px; } .pg-club-cloture { padding: 70px 0 78px; } } /* --- Ou trouver sa cle --------------------------------------------- * Un visiteur sans cle butait sur un champ obligatoire sans savoir ni * pourquoi ni comment y remedier. Le rappel se place au-dessus du * formulaire, avant la premiere question. * ------------------------------------------------------------------ */ .pg-club-cle-aide { margin: 0 0 40px; padding: 28px 30px; border: 1px solid var(--line); border-left: 2px solid var(--gold); background: rgba(154, 163, 176, 0.05); } .pg-club-cle-aide-titre { font: 500 11px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin: 0 0 14px; } .pg-club-cle-aide p { font: 400 15px/1.7 var(--sans); color: var(--body); margin: 0 0 12px; } .pg-club-cle-aide-sans { color: var(--muted) !important; font-size: 14px !important; } .pg-club-cle-aide a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .pg-club-places { margin: 16px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--sans) !important; color: var(--muted) !important; } .pg-club-places strong { color: var(--cream); font-weight: 500; } @media (max-width: 640px) { .pg-club-cle-aide { padding: 22px 20px; } } /* --- L'annonce reste sombre dans les deux registres ----------------- * * Sa boite et son texte suivaient le registre, mais son voile est code en * dur en rgba(14,14,17) : en registre clair on obtenait un voile sombre * sous un texte devenu sombre — illisible. * * La regle deja etablie ailleurs sur ce site s'applique : un texte pose * sur une photographie reste clair dans les deux registres. L'annonce est * une fenetre posee sur la montre ; elle garde donc sa nuit. * ------------------------------------------------------------------ */ body.pg-registre-clair .pg-annonce-boite { background: #17171b; border-color: rgba(242, 242, 243, 0.12); } body.pg-registre-clair .pg-annonce-titre, body.pg-registre-clair .pg-annonce-remise strong, body.pg-registre-clair .pg-annonce-fermer:hover { color: #f2f2f3; } body.pg-registre-clair .pg-annonce-texte { color: rgba(242, 242, 243, 0.78); } body.pg-registre-clair .pg-annonce-sur, body.pg-registre-clair .pg-annonce-taux { color: #9aa3b0; } body.pg-registre-clair .pg-annonce-fin, body.pg-registre-clair .pg-annonce-fermer { color: rgba(242, 242, 243, 0.62); } body.pg-registre-clair .pg-annonce-remise { border-color: rgba(242, 242, 243, 0.14); background: rgba(154, 163, 176, 0.10); } /* Le bouton du registre clair virerait a l'acier sur fond sombre : on lui rend le contraste de la nuit. */ body.pg-registre-clair .pg-annonce-actions .pg-btn-gold { background: #f2f2f3; color: #121215; border-color: #f2f2f3; } /* --- Surtitres sur photographie allegee ------------------------------ * En allegeant les voiles, la photographie remonte et --muted (#6b6459) * est tombe a 4,10:1 sous le surtitre — sous le seuil, pour un texte de * 11 px en capitales. Sur ces en-tetes, les mentions secondaires prennent * la valeur du texte courant plutot que celle des notes. * ------------------------------------------------------------------ */ body.pg-registre-clair .pg-cat-hero.has-media .pg-eyebrow, body.pg-registre-clair .pg-cat-hero.has-media .pg-cat-collection, body.pg-registre-clair .pg-cat-hero.has-media .pg-crumbs, body.pg-registre-clair .pg-shop-hero .pg-eyebrow, body.pg-registre-clair .pg-boutique-hero .pg-eyebrow { color: #4a443c; } body.pg-registre-clair .pg-cat-hero.has-media .pg-crumbs .current { color: #1b1815; } /* ===================== ESPACE MEMBRE ===================== */ /* --- La porte --- */ .pg-porte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 12px 0 26px; } .pg-porte-volet { background: var(--ink); padding: 38px 34px 34px; } .pg-porte-sur { font: 500 11px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin: 0 0 14px; } .pg-porte-volet h2 { font: 400 24px/1.2 var(--serif); color: var(--cream); margin: 0 0 10px; } .pg-porte-mot { font: 400 14px/1.65 var(--sans); color: var(--muted); margin: 0 0 22px; } .pg-porte-volet .pg-club-champ { margin-bottom: 16px; } .pg-porte-volet .pg-btn { width: 100%; justify-content: center; } .pg-porte-cle { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.2em; text-transform: uppercase; } .pg-porte-oubli { display: inline-block; margin-top: 14px; font: 400 13px/1.5 var(--sans); color: var(--muted); } .pg-porte-pied { font: 400 14px/1.6 var(--sans); color: var(--muted); margin: 0; } .pg-porte-pied a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } /* --- Le salon --- */ .pg-salon-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 34px; } .pg-salon-tete h2 { font: 400 30px/1.15 var(--serif); color: var(--cream); margin: 0; } .pg-salon-invite { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 34px; padding: 16px 20px; border-left: 2px solid var(--gold); background: rgba(154, 163, 176, 0.07); } .pg-salon-invite p { margin: 0; font: 400 14px/1.6 var(--sans); color: var(--body); } .pg-salon-invite a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .pg-salon-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 48px; } .pg-salon-carte { background: var(--ink); padding: 32px 30px 34px; } .pg-salon-num { font: 500 11px/1 var(--sans); letter-spacing: 0.14em; color: var(--gold); margin: 0 0 16px; } .pg-salon-carte h3 { font: 400 21px/1.25 var(--serif); color: var(--cream); margin: 0 0 10px; } .pg-salon-carte p { font: 400 15px/1.65 var(--sans); color: var(--body); margin: 0 0 20px; } .pg-salon-carte.is-avenir { opacity: 0.72; } .pg-salon-avenir { display: inline-block; padding: 7px 14px; border: 1px dashed var(--line); font: 500 11px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted); } /* --- Les pensées --- */ .pg-salon-pensees, .pg-salon-profil { padding-top: 40px; border-top: 1px solid var(--line); margin-bottom: 48px; } .pg-salon-pensees h2, .pg-salon-profil h2 { font: 400 28px/1.15 var(--serif); color: var(--cream); margin: 0 0 26px; } .pg-salon-h2 { margin-top: 44px !important; } .pg-salon-vide { font: 400 italic 16px/1.7 var(--serif); color: var(--muted); } .pg-pensee { padding: 26px 0; border-bottom: 1px solid var(--line); } .pg-pensee:last-child { border-bottom: 0; } .pg-pensee-date { font: 500 11px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 8px; } .pg-pensee h3 { font: 400 22px/1.25 var(--serif); color: var(--cream); margin: 0 0 10px; } .pg-pensee-corps p { font: 400 16px/1.8 var(--sans); color: var(--body); margin: 0 0 14px; } .pg-salon-profil .pg-club-champ input[disabled] { opacity: 0.55; cursor: not-allowed; } @media (max-width: 760px) { .pg-porte, .pg-salon-grille { grid-template-columns: 1fr; } .pg-porte-volet { padding: 30px 24px; } .pg-salon-carte { padding: 28px 24px 30px; } .pg-salon-tete { align-items: flex-start; flex-direction: column; } }