/* Theme Name: Gohealt Pharma Theme URI: https://gohealt.example/ Author: Gohealt Pharma Author URI: https://gohealt.example/ Description: Thème de blocs (FSE) « pharmacie moderne premium » pour Gohealt Pharma — design system Menthe fraîche, mobile-first, WCAG 2.2 AA. Optimisé WooCommerce. Dépend du plugin Gohealt Core pour les fonctionnalités (horaires, boutique, RDV, ordonnances, blog). Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 8.1 Version: 1.6.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: gohealt Domain Path: /languages Tags: full-site-editing, block-patterns, e-commerce, accessibility-ready, custom-colors, wide-blocks */ /* ======================================================================= Styles globaux complémentaires au theme.json (chargés via functions.php). Le gros du design vit dans theme.json ; ici on ne met que ce que les presets ne couvrent pas (mises en page de header/footer, CTA mobile…). ======================================================================= */ /* --- En-tête « search-first » (Pattern A) --- */ .gohealt-header{ display:flex;align-items:center;gap:var(--wp--preset--spacing--40);flex-wrap:wrap; max-width:1200px;margin-inline:auto;width:100%; padding-inline:clamp(1rem,.6rem + 2vw,1.5rem); } .gohealt-header .wp-block-search{flex:1 1 320px;max-width:520px} .gohealt-header .wp-block-search__inside-wrapper{ border:1.5px solid var(--wp--preset--color--line); background:var(--wp--preset--color--mist); border-radius:var(--wp--custom--radius--pill); padding:.35rem .35rem .35rem 1rem; } .gohealt-header .wp-block-search__inside-wrapper:focus-within{ border-color:var(--wp--preset--color--brand-strong); background:var(--wp--preset--color--surface); box-shadow:0 0 0 3px rgba(9,122,85,.25); } .gohealt-header .wp-block-search__input{border:0;background:transparent} .gohealt-header .wp-block-search__button{ border-radius:var(--wp--custom--radius--pill); background:var(--wp--preset--color--brand);color:var(--wp--preset--color--ink); } /* --- Tunnel de commande : en-tête et pied de page sans distraction --- Pas de navigation, pas de recherche, pas de bandeau promo : à cette étape chaque lien sortant est une commande perdue. On ne garde que l'identité de l'officine et les repères de confiance qui rassurent au moment de payer. */ .gohealt-checkout-header__bar{align-items:center;gap:var(--wp--preset--spacing--30)} .gohealt-checkout-secure{margin:0;display:inline-flex;align-items:center;gap:.4rem} .gohealt-checkout-secure::before{ content:"";width:.85em;height:.85em;flex:none;background:currentColor; -webkit-mask:var(--gohealt-lock-mask) center/contain no-repeat; mask:var(--gohealt-lock-mask) center/contain no-repeat; } :root{ --gohealt-lock-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E"); } .gohealt-checkout-footer .gohealt-reassurance{justify-content:center} .gohealt-checkout-footer a{color:inherit} .gh-checkout-links{margin-top:var(--wp--preset--spacing--40);text-align:center} @media (max-width:600px){ .gohealt-checkout-header__bar{justify-content:center;text-align:center} } /* --- Mentions légales : identité de l'officine et pharmacien titulaire --- Blocs alimentés par [gohealt_legal_identity] et [gohealt_titulaire]. Ils n'apparaissent que lorsque les réglages correspondants sont renseignés. */ .gh-legal-block{margin-block:var(--wp--preset--spacing--30);line-height:1.7} .gh-titulaire{margin-block:var(--wp--preset--spacing--30);line-height:1.7} /* --- Barre de navigation catégories --- */ .gohealt-navbar{align-items:center;gap:.75rem;max-width:1200px;margin-inline:auto;width:100%;padding-inline:clamp(1rem,.6rem + 2vw,1.5rem)} .gohealt-navbar > .wp-block-navigation{margin-right:auto} /* --- Compte et panier de l'en-tête --------------------------------------- Balisage produit par [gohealt_account] et [gohealt_cart]. Le panier est le chemin de sortie d'un ajout au panier : il doit rester visible et cliquable à toutes les tailles d'écran, y compris quand le libellé texte est masqué. */ .gohealt-header__actions{align-items:center;gap:.5rem;margin-left:auto} .gh-account, .gh-cart{ display:inline-flex;align-items:center;gap:.5rem; color:var(--wp--preset--color--brand-deep);text-decoration:none; padding:.4rem .7rem;border-radius:var(--wp--custom--radius--pill); line-height:1.2;transition:background .15s ease; } .gh-account:hover, .gh-cart:hover{background:var(--wp--preset--color--mist);text-decoration:none} .gh-account svg, .gh-cart svg{flex:none} .gh-account__label{white-space:nowrap} .gh-cart{background:var(--wp--preset--color--mist);font-weight:700} .gh-cart:hover{background:var(--wp--preset--color--brand)} /* Le compteur est ancré sur l'icône : il reste lisible même sans le libellé. */ .gh-cart__icon{position:relative;display:inline-flex} .gh-cart__count{ position:absolute;top:-.45rem;right:-.55rem; min-width:1.15rem;height:1.15rem;padding:0 .25rem; display:inline-flex;align-items:center;justify-content:center; border-radius:999px;background:var(--wp--preset--color--ink-muted); color:#fff;font-size:.68rem;font-weight:800; } .gh-cart.has-items .gh-cart__count{background:var(--wp--preset--color--accent)} .gh-cart__meta{display:flex;flex-direction:column} .gh-cart__label{font-size:.72rem;font-weight:600;color:var(--wp--preset--color--ink-muted);text-transform:uppercase;letter-spacing:.02em} .gh-cart__total{font-size:.9rem;font-weight:800;color:var(--wp--preset--color--ink)} .gh-cart__total .woocommerce-Price-amount{white-space:nowrap} /* Sur petit écran, on garde les icônes — et donc l'accès au panier — mais on retire les libellés qui feraient déborder la ligne d'en-tête. */ @media (max-width:781px){ .gh-account__label, .gh-cart__meta{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .gh-account, .gh-cart{padding:.45rem;gap:0} } /* Si l'administrateur ajoute malgré tout les blocs WooCommerce natifs dans l'en-tête, ils héritent du même habillage. */ .gohealt-navbar .wp-block-woocommerce-customer-account, .gohealt-navbar .wp-block-woocommerce-mini-cart{display:flex;align-items:center} .gohealt-navbar .wc-block-customer-account__link, .gohealt-navbar .wc-block-mini-cart__button{ color:var(--wp--preset--color--brand-deep); padding:.3rem;border-radius:var(--wp--custom--radius--pill); } .gohealt-navbar .wc-block-customer-account__link svg, .gohealt-navbar .wc-block-mini-cart__button svg{width:24px;height:24px} .gohealt-navbar .wc-block-mini-cart__button:hover, .gohealt-navbar .wc-block-customer-account__link:hover{background:var(--wp--preset--color--mist)} /* Correctif : les cases à cocher ne doivent pas prendre toute la largeur. */ .gohealt-rdv-consent input[type="checkbox"], .gohealt-rx-consent input[type="checkbox"]{width:auto;flex:none} /* --- Bandeau de confiance (Pattern B) --- */ .gohealt-trustbar{font-size:.9rem} .gohealt-trustbar .wp-block-column{display:flex;gap:.6rem;align-items:center} /* --- Barre CTA mobile fixe (Pattern C) --- */ .gohealt-mobile-cta{ position:fixed;left:0;right:0;bottom:0;z-index:100; background:var(--wp--preset--color--surface); border-top:1px solid var(--wp--preset--color--line); box-shadow:0 -6px 24px rgba(6,78,59,.10); padding:.5rem max(.75rem,env(safe-area-inset-left)) max(.5rem,env(safe-area-inset-bottom)); } .gohealt-mobile-cta .wp-block-buttons{gap:.4rem;flex-wrap:nowrap} .gohealt-mobile-cta .wp-block-button{flex:1} .gohealt-mobile-cta .wp-block-button__link{ width:100%;justify-content:center;padding:.6em .4em;font-size:.8rem; } @media (min-width:900px){ .gohealt-mobile-cta{display:none} } /* Évite que la barre fixe masque le contenu en bas de page sur mobile. */ @media (max-width:899px){ body{padding-bottom:76px} } /* --- Cartes produit WooCommerce : arrondir/aligner sur le design system --- */ .woocommerce ul.products li.product, .wc-block-grid__product, .wp-block-woocommerce-product-template li{ border:1px solid var(--wp--preset--color--line); border-radius:var(--wp--custom--radius--lg); background:var(--wp--preset--color--surface); padding:0 0 1rem;overflow:hidden; transition:box-shadow .18s ease, transform .18s ease; } .woocommerce ul.products li.product:hover, .wc-block-grid__product:hover{ transform:translateY(-2px); box-shadow:var(--wp--preset--shadow--md); } .woocommerce ul.products li.product img{border-radius:0} .woocommerce ul.products li.product .button, .woocommerce div.product form.cart .button{ border-radius:var(--wp--custom--radius--pill); background:var(--wp--preset--color--brand);color:var(--wp--preset--color--ink); font-weight:700; } .woocommerce ul.products li.product .button:hover{background:var(--wp--preset--color--brand-hover)} /* --- Prix WooCommerce --- */ .woocommerce div.product p.price, .woocommerce ul.products li.product .price{ color:var(--wp--preset--color--ink);font-weight:800; } /* --- Focus visible global (WCAG 2.2 AA) --- */ a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible, input:focus-visible, select:focus-visible{ outline:3px solid var(--wp--preset--color--brand-strong); outline-offset:2px; } /* --- Utilitaires de patterns --- */ .gohealt-eyebrow{ display:inline-flex;align-items:center;gap:.5em; font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--wp--preset--color--brand-strong); background:var(--wp--preset--color--brand-tint); padding:.4em .9em;border-radius:var(--wp--custom--radius--pill); } .gohealt-card{ background:var(--wp--preset--color--surface); border:1px solid var(--wp--preset--color--line); border-radius:var(--wp--custom--radius--lg); } /* ======================================================================= WooCommerce — alignement complet sur le design system ======================================================================= */ /* Boutons Woo (classiques + blocs) */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .wc-block-components-button:not(.is-link){ background:var(--wp--preset--color--brand); color:var(--wp--preset--color--ink); border:0;border-radius:var(--wp--custom--radius--pill); font-weight:700;padding:.7em 1.4em; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .wc-block-components-button:not(.is-link):hover{ background:var(--wp--preset--color--brand-hover);color:var(--wp--preset--color--ink); } /* Prix, promo */ .woocommerce ins,.wc-block-components-product-price ins{background:transparent;text-decoration:none} .woocommerce span.onsale,.wc-block-grid__product-onsale{ background:var(--wp--preset--color--garde);color:#fff; border-radius:var(--wp--custom--radius--pill);min-height:auto;min-width:auto; padding:.25em .7em;font-weight:700;line-height:1.4; } /* Barre de tri + compteur de résultats. WooCommerce fait flotter le compteur à gauche et le tri à droite. Un élément flottant ignore ses marges automatiques : sur un écran large, les deux partaient aux extrémités de la fenêtre pendant que la grille restait dans sa colonne. Le thème leur redonne un parent (.gohealt-shop-toolbar, ouvert en PHP autour des deux crochets WooCommerce) et remplace les flottants par une vraie ligne flex, alignée au pixel près sur la grille de produits. */ .gohealt-shop-toolbar{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:.75rem 1rem;width:100%;margin:0 auto clamp(1rem,.8rem + 1vw,1.5rem);clear:both; } .gohealt-shop-toolbar::before, .gohealt-shop-toolbar::after{content:none !important;display:none !important} .gohealt-shop-toolbar > *{float:none !important;margin:0 !important;max-width:none !important} .woocommerce .gohealt-shop-toolbar .woocommerce-result-count, .woocommerce .gohealt-shop-toolbar .woocommerce-ordering{float:none !important;margin:0 !important} .gohealt-shop-toolbar .woocommerce-ordering{margin-inline-start:auto !important} .woocommerce .woocommerce-result-count{color:var(--wp--preset--color--ink-muted)} .woocommerce .woocommerce-ordering select, .woocommerce .select2-container .select2-selection{ border:1.5px solid var(--wp--preset--color--border-strong); border-radius:var(--wp--custom--radius--sm);padding:.4em .6em;background:#fff; } /* Fiche produit */ .woocommerce div.product .product_title{margin-top:.2em} .woocommerce div.product p.price, .woocommerce div.product span.price{color:var(--wp--preset--color--ink)} .woocommerce div.product .quantity .qty{ border:1.5px solid var(--wp--preset--color--border-strong); border-radius:var(--wp--custom--radius--sm);padding:.5em; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active{ background:var(--wp--preset--color--surface);border-bottom-color:var(--wp--preset--color--surface); } .woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--wp--preset--color--ink-muted)} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--wp--preset--color--brand-deep)} /* Onglets & titres de section */ .woocommerce .products h2,.woocommerce .related h2,.woocommerce .upsells h2{ font-weight:700;letter-spacing:-.02em; } /* Panier & totaux (classique) */ .woocommerce table.shop_table{ border:1px solid var(--wp--preset--color--line);border-radius:var(--wp--custom--radius--lg); overflow:hidden; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals .cart_totals{border-radius:var(--wp--custom--radius--lg)} /* Panier & checkout (blocs) */ .wc-block-components-totals-item__value, .wc-block-components-product-price{color:var(--wp--preset--color--ink)} .wc-block-checkout__form .wc-block-components-text-input input, .wc-block-components-text-input input.components-form-token-field__input, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-account form input{ border:1.5px solid var(--wp--preset--color--border-strong)!important; border-radius:var(--wp--custom--radius--sm)!important; } .wc-block-components-text-input input:focus, .woocommerce form .form-row input.input-text:focus{ box-shadow:0 0 0 3px rgba(9,122,85,.3)!important; border-color:var(--wp--preset--color--brand-strong)!important; } /* Notices WooCommerce à la charte */ .woocommerce-message,.wc-block-components-notice-banner.is-success{ border-top-color:var(--wp--preset--color--brand)!important; background:var(--wp--preset--color--brand-tint); } .woocommerce-info,.wc-block-components-notice-banner.is-info{ border-top-color:var(--wp--preset--color--info)!important; } .woocommerce-error,.wc-block-components-notice-banner.is-error{ border-top-color:var(--wp--preset--color--garde)!important; } .woocommerce-message .button,.woocommerce-info .button{color:var(--wp--preset--color--ink)} /* Compte client */ .woocommerce-account .woocommerce-MyAccount-navigation ul{ border:1px solid var(--wp--preset--color--line);border-radius:var(--wp--custom--radius--lg); overflow:hidden;list-style:none;padding:0;margin:0; } .woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--wp--preset--color--line)} .woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:.7em 1em;text-decoration:none} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--wp--preset--color--brand-tint);color:var(--wp--preset--color--brand-deep);font-weight:700; } /* Fil d'Ariane */ .woocommerce .woocommerce-breadcrumb{color:var(--wp--preset--color--ink-muted);font-size:.9rem} /* Cohérence de largeur : contenu Woo dans la largeur du contenu */ .woocommerce-page .wp-block-group.is-layout-constrained > .woocommerce{max-width:100%} /* ======================================================================= ÉLÉVATION « 2026 » — style premium global + e-commerce ======================================================================= */ /* --- Interactions globales --- */ html{scroll-behavior:smooth} ::selection{background:var(--wp--preset--color--brand-tint);color:var(--wp--preset--color--brand-deep)} .wp-block-button__link{transition:transform .15s ease,background .18s ease,box-shadow .18s ease,color .18s ease} .wp-block-button:not(.is-style-outline):not(.gohealt-mobile-cta *) > .wp-block-button__link.has-brand-background-color, .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background){ box-shadow:0 8px 20px rgba(16,185,129,.28); } .wp-block-button__link:hover{transform:translateY(-1px)} .wp-block-button.is-style-outline .wp-block-button__link{border-width:1.5px} /* Eyebrow un peu plus fin / moderne */ .gohealt-eyebrow{border:1px solid color-mix(in srgb,var(--wp--preset--color--brand) 25%,transparent)} /* Cartes : ombre douce + transition */ .gohealt-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} /* --- GRILLE PRODUITS (2026) : classique + blocs --- */ /* Les marges horizontales restent « auto » : c'est par elles que la mise en page centrée des thèmes de blocs centre la grille. Un « margin:0 » global — celui que ce fichier posait auparavant — collait toute la boutique contre le bord gauche de l'écran, la grille d'un côté et le titre de l'autre. */ /* Les paliers de largeur de carte sont dictés par le contenu, pas par un nombre de colonnes choisi d'avance. Une carte de parapharmacie porte un titre long (« Sérum physiologique · 40 unidoses »), une note, un statut de stock, un prix et un bouton d'achat. À 158 px de largeur minimale, la grille tenait six colonnes de 185 px sur un écran de bureau : chaque titre passait sur trois lignes et le bouton « Ajouter au panier » touchait ses deux bords. Quatre colonnes de 285 px laissent le titre sur deux lignes au plus. Sur téléphone, « min(100%,168px) » garde deux colonnes — une seule donnerait une page interminable — sans jamais déborder d'un écran étroit. */ .woocommerce ul.products{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr)); gap:clamp(.7rem,.5rem + .7vw,1.1rem); margin:0 auto !important;padding:0 !important;list-style:none; width:100%; } @media(min-width:600px){ .woocommerce ul.products{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))} } @media(min-width:1024px){ .woocommerce ul.products{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))} } .woocommerce ul.products::before,.woocommerce ul.products::after{content:none !important;display:none !important} .woocommerce ul.products li.product{ width:auto !important;float:none !important;margin:0 !important;padding:0 !important; display:flex;flex-direction:column;text-align:left; background:var(--wp--preset--color--surface); border:1px solid var(--wp--preset--color--line); border-radius:20px;overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .woocommerce ul.products li.product:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(6,78,59,.12); border-color:var(--wp--preset--color--brand); } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link{ display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit;padding:.5rem .5rem 0; } .woocommerce ul.products li.product img{ margin:0 0 .25rem !important;border-radius:12px !important;width:100%;height:132px;object-fit:contain; background:var(--wp--preset--color--mist);padding:.6rem;box-sizing:border-box; } .woocommerce ul.products li.product .woocommerce-loop-product__title{ padding:.35rem .25rem .1rem !important;font-size:.84rem !important;font-weight:600;line-height:1.3; } .woocommerce ul.products li.product .price{ padding:0 .25rem !important;margin-top:auto;font-weight:800;color:var(--wp--preset--color--ink) !important;font-size:.95rem; } .woocommerce ul.products li.product .star-rating{margin:.35rem .25rem 0 !important;color:#E0A83B;font-size:.75rem} .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart{ margin:.55rem .5rem .6rem !important;display:block;text-align:center;border-radius:999px;padding:.5em .9em !important;font-size:.82rem; } .woocommerce ul.products li.product .onsale{margin:0;position:absolute} .woocommerce ul.products li.product{position:relative} /* Grille produits en BLOCS (boutique / produits similaires / product-collection). IMPORTANT : le bloc « Product Collection » de WooCommerce (is-flex-container, columns-N) impose une largeur fixe minuscule à chaque
  • , avec une spécificité plus forte que la nôtre → les cartes s'effondraient à ~32 px. On force donc la remise à zéro de la largeur pour que la grille pilote la taille des cartes. */ .wp-block-woocommerce-product-template, .wc-block-product-template{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)) !important; gap:clamp(.75rem,.5rem + .8vw,1.25rem) !important;margin:0 !important;padding:0 !important; flex-wrap:wrap; } .wp-block-woocommerce-product-template > li, .wc-block-product-template > li{ list-style:none;margin:0 !important;padding:.5rem !important; width:auto !important;max-width:none !important;min-width:0 !important; flex:0 1 auto !important;box-sizing:border-box !important; background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--line); border-radius:16px;overflow:hidden;display:flex;flex-direction:column; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .wp-block-woocommerce-product-template > li:hover{ transform:translateY(-4px);box-shadow:0 16px 36px rgba(6,78,59,.12);border-color:var(--wp--preset--color--brand); } .wp-block-woocommerce-product-template img{ height:132px !important;width:100% !important;object-fit:contain !important;aspect-ratio:auto !important; background:var(--wp--preset--color--mist);border-radius:12px;padding:.6rem;box-sizing:border-box;margin:0 0 .4rem !important; } .wp-block-woocommerce-product-template .wc-block-components-product-image{margin:0 !important} .wp-block-woocommerce-product-template .wp-block-post-title, .wp-block-woocommerce-product-template .wc-block-components-product-title{ font-size:.84rem !important;font-weight:600;margin:.15rem .25rem !important;padding:0 !important;line-height:1.3; } .wp-block-woocommerce-product-template .wp-block-woocommerce-product-price, .wp-block-woocommerce-product-template .wc-block-components-product-price{ padding:0 .25rem !important;margin-top:auto;font-weight:800;font-size:.95rem; } .wp-block-woocommerce-product-template .wp-block-woocommerce-product-rating{padding:0 .25rem;font-size:.75rem} .wp-block-woocommerce-product-template .wp-block-button{padding:.5rem .25rem 0 !important;margin:0 !important} .wp-block-woocommerce-product-template .wp-block-button__link{ border-radius:999px !important;width:100%;justify-content:center;font-size:.8rem;padding:.5em .9em !important; } /* --- BARRE OUTILS BOUTIQUE --- */ .woocommerce .woocommerce-result-count, .wc-block-product-sort-select{margin:0} .woocommerce-notices-wrapper:empty{display:none} .woocommerce-products-header__title.page-title{font-size:clamp(2rem,1.6rem + 2vw,3rem);letter-spacing:-.03em} /* --- FICHE PRODUIT (2026) --- */ /* Fiche produit : centrée, largeur maîtrisée. On laisse le template en blocs gérer la répartition image / résumé (ne pas forcer de grille ici). */ .woocommerce div.product{max-width:1080px;margin-inline:auto;width:100%} .single-product .woocommerce-breadcrumb, .single-product .woocommerce-notices-wrapper{max-width:1080px;margin-inline:auto} /* Galerie compacte quand le résumé est à côté (desktop). */ @media(min-width:900px){ .woocommerce div.product .woocommerce-product-gallery, .woocommerce div.product .wp-block-woocommerce-product-image-gallery{max-width:340px} } .woocommerce div.product .woocommerce-product-gallery{margin:0 !important;width:100% !important} .woocommerce div.product .woocommerce-product-gallery__wrapper img{border-radius:24px;border:1px solid var(--wp--preset--color--line)} .woocommerce div.product .woocommerce-product-gallery__trigger{border-radius:999px} .woocommerce div.product .entry-summary{margin:0 !important;width:100% !important} @media(min-width:900px){.woocommerce div.product .entry-summary{position:sticky;top:1.5rem}} .woocommerce div.product .product_title{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);letter-spacing:-.02em;margin:.1em 0 .3em} .woocommerce div.product p.price,.woocommerce div.product .stock{margin-top:.3em} .woocommerce div.product p.price,.woocommerce div.product .price{font-size:1.7rem;font-weight:800;color:var(--wp--preset--color--ink)} .woocommerce div.product .price del{color:var(--wp--preset--color--ink-muted);font-weight:400;font-size:1.1rem} .woocommerce div.product form.cart{margin:1.3rem 0} .woocommerce div.product form.cart .quantity .qty{height:48px} .woocommerce div.product .single_add_to_cart_button{ padding:1em 2em !important;font-size:1.05rem !important;border-radius:999px !important;width:auto; } .woocommerce div.product .woocommerce-product-details__short-description{color:var(--wp--preset--color--ink-muted)} /* Réassurance sous le bouton (générée par le template block) */ .gohealt-reassurance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .9rem;margin-top:1.2rem;max-width:430px} .gohealt-reassurance .ri{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--wp--preset--color--ink-muted)} .gohealt-reassurance .ri strong{color:var(--wp--preset--color--ink);font-weight:600} /* Onglets pill */ .woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:clamp(1.5rem,1rem + 2vw,3rem)} .woocommerce div.product .woocommerce-tabs ul.tabs{border:0;padding:0;margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.5rem} .woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0} .woocommerce div.product .woocommerce-tabs ul.tabs li{ border:1px solid var(--wp--preset--color--line) !important;background:var(--wp--preset--color--surface);border-radius:999px;margin:0;padding:0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none !important;border:0 !important} .woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:.55em 1.2em !important;color:var(--wp--preset--color--ink-muted);font-weight:600} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--wp--preset--color--brand-tint)} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--wp--preset--color--brand-deep)} .woocommerce div.product .related,.woocommerce div.product .upsells{grid-column:1/-1;margin-top:clamp(1.5rem,1rem + 2vw,3rem)} .woocommerce div.product .related > h2,.woocommerce div.product .upsells > h2{font-size:clamp(1.4rem,1.2rem + 1vw,2rem);letter-spacing:-.02em;margin-bottom:1.2rem} /* --- PANIER / CHECKOUT (blocs) 2026 --- */ .wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{--wc-brand:var(--wp--preset--color--brand)} .wc-block-cart-items,.wc-block-components-sidebar,.wc-block-checkout__sidebar .wc-block-components-totals-wrapper{ border-radius:20px; } .wc-block-components-sidebar,.wc-block-checkout__sidebar > .wc-block-components-panel, .wc-block-cart .wc-block-cart__totals-title + *{ background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--line); border-radius:20px;padding:1.25rem; } .wc-block-components-button.contained{border-radius:999px !important;background:var(--wp--preset--color--brand) !important;color:var(--wp--preset--color--ink) !important;font-weight:700} .wc-block-components-button.contained:hover{background:var(--wp--preset--color--brand-hover) !important} .wc-block-components-totals-item__value{font-weight:700} .wc-block-components-order-summary,.wc-block-components-totals-footer-item{font-weight:700} /* Panier vide : icône à la charte */ .wc-block-cart__empty-cart__title,.cart-empty{font-weight:700} /* --- COMPTE CLIENT : formulaires arrondis --- box-sizing n'est pas décoratif ici. WordPress ne remet pas box-sizing à border-box sur le contenu d'un thème de blocs, et WooCommerce laisse ses conteneurs de compte en content-box. Le panneau reçoit une largeur de 100 % de sa colonne ; la marge intérieure et la bordure s'ajoutaient par-dessus. Mesuré sur /mon-compte/ à 390 px de large : le panneau faisait 384 px dans une colonne de 374 px, et la page entière glissait de 10 px sur le côté — ce petit débordement horizontal qu'on sent au doigt sans savoir d'où il vient. Les formulaires de connexion sont dans le même cas : leur max-width de 520 px valait en réalité 584 px avec les marges intérieures. */ .woocommerce-account .woocommerce-MyAccount-content{ background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--line); border-radius:20px;padding:clamp(1.2rem,1rem + 1vw,2rem);box-sizing:border-box;max-width:100%; } .woocommerce form .form-row label{font-weight:600} .woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword{ background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--line); border-radius:20px;padding:clamp(1.2rem,1rem + 1vw,2rem);max-width:520px;box-sizing:border-box; } /* --- Titres de section e-commerce --- */ .woocommerce .products h2{letter-spacing:-.02em} /* --- Bandeau d'avantages boutique --- */ .gohealt-shop-usp{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem; background:var(--wp--preset--color--surface); border:1px solid var(--wp--preset--color--line);border-radius:20px; padding:1.1rem 1.3rem;margin:0 0 clamp(1.5rem,1rem + 2vw,2.5rem); clear:both; } .gohealt-shop-usp .usp{display:flex;gap:.7rem;align-items:center} .gohealt-shop-usp .usp-ic{ flex:none;width:42px;height:42px;border-radius:999px;display:grid;place-items:center; background:var(--wp--preset--color--brand-tint);color:var(--wp--preset--color--brand-deep); } .gohealt-shop-usp .usp-t{display:flex;flex-direction:column;line-height:1.3} .gohealt-shop-usp .usp-t strong{font-weight:700;font-size:.95rem} .gohealt-shop-usp .usp-t span{font-size:.82rem;color:var(--wp--preset--color--ink-muted)} /* ======================================================================= BIBLIOTHÈQUE DE COMPOSANTS UX — refonte haut de gamme (utilisée dans les blocs wp:html des templates) ======================================================================= */ .gh-wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(1rem,.6rem + 2vw,1.5rem)} .gh-narrow{max-width:820px} /* En-tête de section */ .gh-head{max-width:760px;margin-bottom:clamp(1.75rem,1.2rem + 2vw,2.75rem)} .gh-head.center{margin-inline:auto;text-align:center} .gh-head .gh-kicker{ display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--brand-strong); background:var(--wp--preset--color--brand-tint);border:1px solid color-mix(in srgb,var(--wp--preset--color--brand) 22%,transparent); padding:.4em .9em;border-radius:999px;margin-bottom:1rem; } .gh-head h2{font-size:clamp(1.9rem,1.5rem + 1.8vw,2.9rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 .5rem} .gh-head p{font-size:1.15rem;color:var(--wp--preset--color--ink-muted);margin:0} .gh-head .gh-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;max-width:none} .gh-link{font-weight:700;color:var(--wp--preset--color--brand-strong);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:.35em} .gh-link:hover{gap:.6em} /* Grilles */ .gh-grid{display:grid;gap:clamp(.9rem,.6rem + 1vw,1.5rem)} .gh-grid.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .gh-grid.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .gh-grid.c4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .gh-grid.c6{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} /* Pastille d'icône */ .gh-ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px; background:var(--wp--preset--color--brand-tint);color:var(--wp--preset--color--brand-deep)} .gh-ico svg{width:26px;height:26px} .gh-ico.round{border-radius:999px;width:46px;height:46px} .gh-ico.on-deep{background:rgba(255,255,255,.12);color:var(--wp--preset--color--accent)} /* Carte catégorie */ .gh-cat{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;text-decoration:none; color:var(--wp--preset--color--ink);background:var(--wp--preset--color--surface); border:1px solid var(--wp--preset--color--line);border-radius:20px;padding:1.5rem 1rem; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} .gh-cat:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(6,78,59,.12);border-color:var(--wp--preset--color--brand)} .gh-cat b{font-weight:600;font-size:.98rem} /* Carte feature / service */ .gh-feature{display:flex;flex-direction:column;gap:.85rem;background:var(--wp--preset--color--surface); border:1px solid var(--wp--preset--color--line);border-radius:22px;padding:1.6rem; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} .gh-feature:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(6,78,59,.10);border-color:color-mix(in srgb,var(--wp--preset--color--brand) 40%,var(--wp--preset--color--line))} .gh-feature h3{font-size:1.2rem;margin:0;letter-spacing:-.01em} .gh-feature p{margin:0;color:var(--wp--preset--color--ink-muted);font-size:.95rem;flex:1} .gh-feature .gh-link{margin-top:.3rem} .gh-feature .price-hint{font-weight:700;color:var(--wp--preset--color--brand-strong);font-size:.9rem} /* Bandeau confiance */ .gh-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.25rem} .gh-trust .ti{display:flex;gap:.8rem;align-items:center} .gh-trust .ti b{display:block;font-weight:700;font-size:.95rem} .gh-trust .ti span{font-size:.85rem;color:var(--wp--preset--color--ink-muted)} /* Piliers santé (cocons) */ .gh-pillar{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem; min-height:190px;border-radius:22px;padding:1.5rem;text-decoration:none;color:#fff; background:linear-gradient(150deg,var(--wp--preset--color--brand-strong),var(--wp--preset--color--brand-deep)); transition:transform .2s ease,box-shadow .2s ease} .gh-pillar:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(6,78,59,.22)} .gh-pillar h3{color:#fff;margin:0;font-size:1.3rem} .gh-pillar span{color:var(--wp--preset--color--accent);font-size:.9rem} .gh-pillar .gh-ico{background:rgba(255,255,255,.14);color:#fff} /* Puces de réassurance (héros) */ .gh-chips{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.5rem;list-style:none;padding:0} .gh-chips li{display:inline-flex;align-items:center;gap:.45em;font-size:.9rem;font-weight:600;color:var(--wp--preset--color--brand-deep)} .gh-chips svg{width:18px;height:18px;color:var(--wp--preset--color--brand)} /* Statistiques */ .gh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;text-align:center} .gh-stat .n{font-size:clamp(1.8rem,1.4rem + 1.5vw,2.6rem);font-weight:800;letter-spacing:-.03em;color:var(--wp--preset--color--brand-deep)} .gh-stat .l{font-size:.9rem;color:var(--wp--preset--color--ink-muted)} /* Avis */ .gh-review{background:var(--wp--preset--color--base);border:1px solid var(--wp--preset--color--line);border-radius:20px;padding:1.5rem} .gh-review .stars{color:#E0A83B;letter-spacing:2px;font-size:.95rem} .gh-review p{margin:.7rem 0;font-size:1rem} .gh-review .who{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--wp--preset--color--ink-muted)} .gh-review .av{width:38px;height:38px;border-radius:999px;background:var(--wp--preset--color--mist-deep);color:var(--wp--preset--color--brand-deep);display:grid;place-items:center;font-weight:700} /* --- FOOTER refondu --- */ .gh-foot{background:var(--wp--preset--color--brand-deep);color:#CFEFE0} .gh-foot a{color:#EAF7F0;text-decoration:none} .gh-foot a:hover{color:#fff;text-decoration:underline} .gh-foot .gh-wrap{padding-block:clamp(2.5rem,2rem + 2vw,4rem)} .gh-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:2rem} .gh-foot h4{color:#fff;font-size:1rem;margin:0 0 1rem;letter-spacing:.02em} .gh-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.92rem} .gh-foot .brand-blurb{max-width:36ch;color:#B7DECC;font-size:.92rem} .gh-foot .flogo{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:.6rem;display:inline-flex;align-items:center;gap:.5rem} .gh-foot .flogo svg{width:28px;height:28px} .gh-foot .news{display:flex;gap:.5rem;margin-top:1rem;max-width:340px} .gh-foot .news input{flex:1;min-width:0;border:0;border-radius:999px;padding:.7rem 1rem;font:inherit;color:var(--wp--preset--color--ink)} .gh-foot .news button{border:0;border-radius:999px;padding:.7rem 1.15rem;font:inherit;font-weight:700;background:var(--wp--preset--color--brand);color:var(--wp--preset--color--ink);cursor:pointer;white-space:nowrap} .gh-foot .news button:hover{background:var(--wp--preset--color--accent)} .gh-foot .fcontact{display:grid;gap:.5rem;font-size:.92rem} .gh-foot .fcontact .row{display:flex;gap:.6rem;align-items:flex-start} .gh-foot .fcontact svg{width:18px;height:18px;flex:none;margin-top:.15rem;color:var(--wp--preset--color--accent)} .gh-foot-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;align-items:center;font-size:.82rem;color:#9FCBB9} .gh-foot-bottom a{color:#9FCBB9} .gh-pay{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap} .gh-pay .chip{background:rgba(255,255,255,.1);border-radius:8px;padding:.3rem .6rem;font-size:.72rem;font-weight:700;color:#EAF7F0;letter-spacing:.03em} .gh-social{display:flex;gap:.5rem} .gh-social a{width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff} .gh-social a:hover{background:var(--wp--preset--color--brand);color:var(--wp--preset--color--ink)} .gh-social svg{width:18px;height:18px} @media(max-width:860px){.gh-foot-top{grid-template-columns:1fr 1fr}} @media(max-width:520px){.gh-foot-top{grid-template-columns:1fr}} /* --- Marque d'en-tête : image, texte, ou les deux --------------------------- * * La place réservée au logo est une hauteur, pas une taille de fichier : * --gh-brand-h est écrite en ligne par le thème depuis le réglage * « Hauteur réservée », et c'est elle qui contraint aussi bien une image de * 3000 px de large qu'un nom de vingt-cinq lettres. * * Pour l'image, max-height + width:auto suffisent : le rapport est conservé et * rien ne déborde. Pour le texte, on n'a aucun moyen de mesurer un rendu en * CSS pur — mais on connaît le nombre de caractères, transmis en * --gh-brand-len. Un nom court garde donc sa pleine taille, un nom long * rétrécit progressivement, et le clamp() empêche les deux extrêmes : jamais * illisible, jamais démesuré. */ .gh-brand{ --gh-brand-h:46px; display:inline-flex;align-items:center;gap:.55rem;min-width:0; max-width:min(100%,var(--gh-brand-max,340px)); text-decoration:none;font-weight:800;letter-spacing:-.03em; color:var(--wp--preset--color--brand-deep) } .gh-brand:hover .gh-brandtext{color:var(--wp--preset--color--brand-strong)} .gh-brandtext{ color:var(--wp--preset--color--brand-deep);min-width:0; font-size:clamp(1rem,calc(26rem / max(var(--gh-brand-len,14),6)),1.45rem); line-height:1.15;overflow-wrap:anywhere } /* L'image du logo, quelle que soit sa taille d'origine. */ .gh-brandimg{ display:block;width:auto;height:auto; max-height:var(--gh-brand-h);max-width:100%; object-fit:contain } /* Image + texte : l'image cède un peu de hauteur pour que l'ensemble tienne dans la même bande que le texte seul. */ .gh-brand.is-both .gh-brandimg{max-height:calc(var(--gh-brand-h) * .86)} .gh-brand.is-both .gh-brandtext{font-size:clamp(.9rem,calc(20rem / max(var(--gh-brand-len,14),6)),1.2rem)} .gh-logomark{display:inline-grid;place-items:center;border-radius:11px; width:clamp(28px,calc(var(--gh-brand-h) * .74),44px); height:clamp(28px,calc(var(--gh-brand-h) * .74),44px); background:var(--wp--preset--color--brand);color:var(--wp--preset--color--ink);flex:none} .gh-logomark svg{width:58%;height:58%} /* Sur un petit écran, la barre de recherche et le panier passent avant le logo : on lui reprend un peu de place plutôt que de laisser l'en-tête déborder. */ @media(max-width:600px){ .gh-brand{--gh-brand-max:60vw} .gh-brandimg{max-height:calc(var(--gh-brand-h) * .8)} } /* Enveloppe des images optimisées : purement technique, elle ne doit rien changer à la mise en page héritée du qu'elle contient. */ .gh-pic{display:contents} /* --- Filtres boutique (chips catégories) --- */ .gohealt-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 clamp(1.25rem,1rem + 1.5vw,2rem);clear:both} .gohealt-filters .chip{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:999px; border:1.5px solid var(--wp--preset--color--line);background:var(--wp--preset--color--surface); color:var(--wp--preset--color--ink);text-decoration:none;font-size:.88rem;font-weight:600;transition:all .15s ease} .gohealt-filters .chip:hover{border-color:var(--wp--preset--color--brand);color:var(--wp--preset--color--brand-strong)} .gohealt-filters .chip.is-active{background:var(--wp--preset--color--brand);border-color:var(--wp--preset--color--brand);color:var(--wp--preset--color--ink)} /* --- Cartes promotions --- */ .gh-promos{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(.9rem,.6rem + 1vw,1.25rem)} @media(max-width:900px){.gh-promos{grid-template-columns:1fr 1fr}} @media(max-width:600px){.gh-promos{grid-template-columns:1fr}} /* La carte est un
    : le titre et le texte ne sont plus imbriqués dans une ancre. Seul le bouton est un vrai lien, étiré sur toute la carte par ::after — toute la surface reste cliquable, le HTML reste valide et aucun filtre de mise en forme ne peut dupliquer la carte. */ .gh-promo{position:relative;overflow:hidden;border-radius:22px;padding:1.8rem;min-height:210px; display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;color:#fff; transition:transform .2s ease,box-shadow .2s ease} .gh-promo:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(6,78,59,.24)} .gh-promo:focus-within{box-shadow:0 0 0 3px var(--wp--preset--color--brand),0 20px 44px rgba(6,78,59,.24)} .gh-promo .tag{position:absolute;top:1.4rem;left:1.8rem;display:inline-flex;align-items:center;gap:.4em; font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; background:rgba(255,255,255,.2);padding:.3em .8em;border-radius:999px} .gh-promo h3{color:#fff;font-size:clamp(1.35rem,1.1rem + 1vw,2rem);margin:0 0 .2rem;letter-spacing:-.02em;line-height:1.1} .gh-promo p{color:rgba(255,255,255,.88);margin:0 0 1rem;font-size:.95rem} .gh-promo .cta{align-self:flex-start;background:#fff;color:var(--wp--preset--color--brand-deep);font-weight:700; padding:.6rem 1.2rem;border-radius:999px;font-size:.9rem;text-decoration:none} .gh-promo .cta::after{content:"";position:absolute;inset:0;border-radius:inherit} .gh-promo .cta:focus-visible{outline:none} .gh-promo.p1{background:linear-gradient(150deg,#0B8F66,#064E3B)} .gh-promo.p2{background:linear-gradient(150deg,#0E7C99,#0A4A5C)} .gh-promo.p3{background:linear-gradient(150deg,#C2410C,#7A2A0C)} /* ======================================================================= CHAT FLOTTANT · BADGE TÉLÉPHONE · IMAGES ADAPTATIVES ======================================================================= */ /* Bouton de chat flottant (WhatsApp / Telegram) */ .gohealt-chat{ position:fixed;right:16px;bottom:16px;z-index:90; display:inline-flex;align-items:center;gap:.55rem; background:var(--wp--preset--color--brand);color:var(--wp--preset--color--ink); border-radius:999px;padding:.5rem;font-weight:700;font-size:.92rem;text-decoration:none; box-shadow:0 12px 30px rgba(6,78,59,.30);transition:transform .15s ease,box-shadow .15s ease; } .gohealt-chat:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(6,78,59,.36)} .gohealt-chat__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:rgba(10,21,18,.08);color:var(--wp--preset--color--brand-deep)} .gohealt-chat__label{padding-right:.7rem} @media(max-width:899px){ .gohealt-chat{bottom:86px} /* au-dessus de la barre CTA mobile */ .gohealt-chat__label{display:none} /* icône seule sur mobile */ } /* Badge « contact téléphone » sur la fiche produit */ .gohealt-phone-badge{ display:inline-flex;align-items:center;gap:.8rem;margin-top:1.1rem; background:var(--wp--preset--color--brand-tint); border:1px solid color-mix(in srgb,var(--wp--preset--color--brand) 25%,transparent); border-radius:16px;padding:.8rem 1.1rem;text-decoration:none;color:var(--wp--preset--color--brand-deep); transition:transform .15s ease,box-shadow .15s ease; } .gohealt-phone-badge:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(6,78,59,.12)} .gohealt-phone-badge > svg{color:var(--wp--preset--color--brand-strong);flex:none} .gohealt-phone-badge > span{display:flex;flex-direction:column;line-height:1.25} .gohealt-phone-badge strong{font-weight:600;font-size:.85rem;color:var(--wp--preset--color--ink-muted)} .gohealt-phone-badge > span > span{font-size:1.1rem;font-weight:800;color:var(--wp--preset--color--brand-strong)} /* --- Images adaptatives : toute image s'ajuste à son cadre --- */ .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover} .wp-block-image img{max-width:100%;height:auto} figure.wp-block-image.is-style-rounded img,figure.wp-block-image img{border-radius:inherit} /* Une image déposée comme 1er enfant d'une carte devient un fond couvrant. Accepte les deux formes : la balise nue (HTML rédigé à la main) ET le bloc Image de Gutenberg, qui produit
    . Ainsi, dans l'éditeur, il suffit de glisser un bloc Image en tête d'une carte pour lui donner une image de fond — sans toucher au code. `isolation:isolate` crée un contexte d'empilement propre à la carte : le fond peut alors passer en z-index:-1 (donc derrière TOUT le contenu, y compris les futurs blocs ajoutés par le client) sans jamais disparaître sous la page. */ .gh-cat,.gh-feature,.gh-pillar,.gh-promo,.gohealt-card{position:relative;isolation:isolate} .gh-cat > img:first-child,.gh-feature > img:first-child, .gh-pillar > img:first-child,.gh-promo > img:first-child, .gh-cat > figure.wp-block-image:first-child,.gh-feature > figure.wp-block-image:first-child, .gh-pillar > figure.wp-block-image:first-child,.gh-promo > figure.wp-block-image:first-child{ position:absolute;inset:0;width:100%;height:100%;margin:0; object-fit:cover;overflow:hidden;z-index:-1;border-radius:inherit; } .gh-cat > figure.wp-block-image:first-child img,.gh-feature > figure.wp-block-image:first-child img, .gh-pillar > figure.wp-block-image:first-child img,.gh-promo > figure.wp-block-image:first-child img{ /* `!important` assumé : l'éditeur écrit une largeur/hauteur en style « inline » dès que l'image est redimensionnée à la souris, et une image de FOND doit toujours couvrir la carte entière. */ width:100%!important;height:100%!important;max-width:none; object-fit:cover;border-radius:inherit; } .gh-pillar > img:first-child,.gh-promo > img:first-child, .gh-pillar > figure.wp-block-image:first-child,.gh-promo > figure.wp-block-image:first-child{opacity:.9} /* Cadre média générique réutilisable (ratio + recadrage auto) */ .gh-frame{position:relative;overflow:hidden;border-radius:16px;background:var(--wp--preset--color--mist);aspect-ratio:4/3} .gh-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ======================================================================= VARIATIONS PRODUIT — sélecteur moderne (taille, format, dosage…) ======================================================================= */ .woocommerce div.product form.cart .variations{ width:100%;border:0;margin:0 0 1rem;border-collapse:collapse;display:block; } .woocommerce div.product form.cart .variations tbody{display:grid;gap:.9rem} .woocommerce div.product form.cart .variations tr{display:grid;gap:.35rem;margin:0} .woocommerce div.product form.cart .variations th.label{ text-align:left;font-weight:700;font-size:.9rem;color:var(--wp--preset--color--ink); padding:0;width:auto;line-height:1.3; } .woocommerce div.product form.cart .variations td.value{padding:0;position:relative} .woocommerce div.product form.cart .variations select{ width:100%;min-height:50px;padding:.65em 2.6em .65em 1em;font:inherit;font-size:1rem; border:1.5px solid var(--wp--preset--color--border-strong);border-radius:14px; background-color:var(--wp--preset--color--surface);color:var(--wp--preset--color--ink); appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23064E3B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1em center;background-size:18px; transition:border-color .15s ease,box-shadow .15s ease; } .woocommerce div.product form.cart .variations select:hover{border-color:var(--wp--preset--color--brand)} .woocommerce div.product form.cart .variations select:focus{ border-color:var(--wp--preset--color--brand-strong); box-shadow:0 0 0 3px rgba(9,122,85,.25);outline:none; } .woocommerce div.product form.cart .reset_variations{ display:inline-flex;align-items:center;gap:.3em;margin-top:.1rem; font-size:.85rem;font-weight:600;color:var(--wp--preset--color--brand-strong);text-decoration:none; } .woocommerce div.product form.cart .reset_variations:hover{text-decoration:underline} /* Bloc prix + disponibilité de la variation choisie */ .woocommerce div.product .single_variation_wrap{margin-top:.3rem} .woocommerce div.product .single_variation .woocommerce-variation-price{margin-bottom:.7rem} .woocommerce div.product .single_variation .woocommerce-variation-price .price{ font-size:1.7rem;font-weight:800;color:var(--wp--preset--color--ink); } .woocommerce div.product .single_variation .woocommerce-variation-availability{margin-bottom:.5rem} .woocommerce div.product .single_variation .woocommerce-variation-availability .stock{ display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.9rem; } .woocommerce div.product .single_variation .woocommerce-variation-availability .stock.in-stock{color:var(--wp--preset--color--brand-strong)} .woocommerce div.product .single_variation .woocommerce-variation-availability .stock.out-of-stock{color:var(--wp--preset--color--garde)} .woocommerce div.product .woocommerce-variation-description p{color:var(--wp--preset--color--ink-muted);font-size:.92rem;margin:.2rem 0 .6rem} /* Swatches de variation (boutons cliquables — amélioration progressive du