/* ============================================================================= ELAFYA — COUCHE DE RACCORD DES FICHES PRODUIT ISSUES DES LANDING PAGES ----------------------------------------------------------------------------- Cette feuille ne redessine rien. Elle fait trois choses, et rien d'autre : 1. elle rend au conteneur `.elx-page` les quelques reglages que la landing posait sur `body` et que le cloisonnement a deplaces ; 2. elle habille les composants introduits par le moteur WooCommerce et qui n'existaient pas dans la landing : prix reel, disponibilite reelle, note reelle, total, piege a robots, messages WooCommerce ; 3. elle raccorde la fiche a l'en-tete et au pied de page du theme. Elle est chargee AVANT la feuille du produit : la direction artistique de la landing garde donc le dernier mot sur tout ce qu'elle definit. ========================================================================== */ /* ----------------------------------------------------------------------------- 1 . CONTENEUR -------------------------------------------------------------------------- */ /* La regle `*` de la landing couvre les descendants ; le conteneur lui-meme doit recevoir le meme modele de boite. */ .elx-page { box-sizing: border-box; } /* La landing servait toute la page : ses fonds et sa typographie tenaient sur `body`. Ils tiennent desormais sur le conteneur, qui occupe la meme surface. Les valeurs sont celles de la landing, reprises telles quelles. */ .elx-page { display: block; width: 100%; overflow-x: clip; } /* `scroll-padding-top` etait calcule depuis `--nav-h`, defini par la landing sur `:root`. Cette variable vit maintenant sur le conteneur : la declarer ici sur la racine redonne au defilement ancre sa marge haute, en tenant compte de l'en-tete du theme et non de celui de la landing, qui n'est plus rendu. */ :root { --elx-header-h: 62px; } @media (min-width: 768px) { :root { --elx-header-h: 74px; } } @media (min-width: 1024px) { :root { --elx-header-h: 84px; } } html:has(.elx-page) { scroll-padding-top: calc(var(--elx-header-h) + 20px); } /* Repli pour les navigateurs sans `:has()` : la valeur reste raisonnable. */ .elx-page { scroll-margin-top: calc(var(--elx-header-h) + 20px); } .elx-page [id] { scroll-margin-top: calc(var(--elx-header-h) + 20px); } /* ----------------------------------------------------------------------------- 1 bis . SELECTEUR DE LANGUE ----------------------------------------------------------------------------- Deux libelles, jamais un drapeau : une langue n'est pas un pays. Le composant reprend la sobriete de celui des landings, mais il vit desormais en tete de fiche, l'en-tete du site ayant remplace la barre de navigation de la landing. -------------------------------------------------------------------------- */ .elx-langbar { background: var(--el-paper, #FFFDF9); border-bottom: 1px solid var(--el-line, #E3DACA); } .elx-langbar__in { display: flex; justify-content: flex-end; padding-block: 8px; } .elx-page[dir="rtl"] .elx-langbar__in { justify-content: flex-start; } .elx-lang { display: inline-flex; align-items: center; gap: 8px; } .elx-lang__b { min-height: 34px; padding: 4px 8px; background: none; border: 0; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--el-muted, #4E5C55); border-bottom: 1px solid transparent; transition: color .2s var(--ease, ease), border-color .2s var(--ease, ease); } .elx-lang__b:hover { color: var(--el-green, #0E3B2E); } .elx-lang__b[aria-pressed="true"] { color: var(--el-green, #0E3B2E); border-color: var(--el-gold, #A8813F); } /* Chaque libelle garde la police de sa propre langue, quelle que soit celle de la fiche : « العربية » n'est jamais rendu par Manrope. */ .elx-lang__b[lang="ar"] { font-family: 'IBM Plex Sans Arabic', 'Noto Naskh Arabic', system-ui, sans-serif; font-size: 15px; } .elx-lang__sep { color: var(--el-line, #E3DACA); } /* ----------------------------------------------------------------------------- 2 . PRIX — rendu par WooCommerce ----------------------------------------------------------------------------- La landing affichait un montant ecrit dans le document. Le prix vient desormais de la boutique : il peut etre simple, en promotion, ou absent. -------------------------------------------------------------------------- */ .elx-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: clamp(30px, 4.4vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; color: var(--el-green, #0E3B2E); } .elx-price .woocommerce-Price-amount, .elx-price bdi { font: inherit; color: inherit; } .elx-price-was { font-family: var(--font-sans, system-ui, sans-serif); font-size: clamp(17px, 2vw, 20px); font-weight: 400; color: var(--el-muted, #4E5C55); text-decoration: line-through; text-decoration-thickness: 1px; text-underline-offset: 2px; } .elx-price-off { font-family: var(--font-sans, system-ui, sans-serif); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #fff; background: var(--el-err, #A8322A); border-radius: 4px; padding: 4px 9px; line-height: 1.3; } /* Aucun tarif arbitre : on le dit, on n'affiche pas un montant de remplacement. */ .elx-price--none { font-size: clamp(19px, 2.4vw, 23px); color: var(--el-body, #3D4B45); } .elx-price-none { font-family: var(--font-sans, system-ui, sans-serif); font-weight: 500; } /* Le prix barre suit la direction de lecture, jamais l'inverse. */ [dir="rtl"] .elx-price { flex-direction: row; } /* ----------------------------------------------------------------------------- 3 . DISPONIBILITE — rendue par WooCommerce -------------------------------------------------------------------------- */ .elx-stock { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: var(--fs-micro, 14px); font-weight: 500; line-height: 1.5; color: var(--el-body, #3D4B45); } .elx-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #2E7D5B; box-shadow: 0 0 0 3px rgba(46, 125, 91, .16); flex: none; } .elx-stock.is-out { color: var(--el-err, #A8322A); } .elx-stock.is-out .elx-stock-dot { background: var(--el-err, #A8322A); box-shadow: 0 0 0 3px rgba(168, 50, 42, .14); } /* ----------------------------------------------------------------------------- 4 . NOTE ET AVIS — jamais fabriques (cf. elafya_rating) -------------------------------------------------------------------------- */ .elx-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .elx-rating .el-rate { display: inline-flex; align-items: center; gap: 8px; } .elx-rating .el-rate-avg { font-weight: 600; color: var(--el-ink, #14211C); } .elx-rating .el-rate-count { font-size: 14px; color: var(--el-muted, #4E5C55); } .elx-rating .star-rating { color: var(--el-gold, #A8813F); } /* Le lien vers les avis reste un lien de texte, pas un bouton. */ .elx-reviews-link { font-size: 14px; font-weight: 500; color: var(--el-gold-ink, #7A5C24); text-decoration: none; border-bottom: 1px solid currentColor; } /* ----------------------------------------------------------------------------- 5 . FORMULAIRE DE COMMANDE -------------------------------------------------------------------------- */ /* Piege a robots. Retire de l'affichage sans `display:none` : certains automates ignorent les champs masques de cette facon, et un lecteur d'ecran ne le rencontre pas puisque le bloc porte aria-hidden et tabindex -1. */ .elx-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* Total courant, calcule a partir du prix WooCommerce transmis a la page. */ .elx-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 18px; padding-top: 16px; border-top: 1px solid var(--el-line, #E3DACA); } .elx-total[hidden] { display: none; } .elx-total-l { font-size: var(--fs-micro, 14px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--el-muted, #4E5C55); } .elx-total-v { font-family: var(--font-serif, Georgia, serif); font-size: clamp(21px, 2.6vw, 26px); font-weight: 500; color: var(--el-green, #0E3B2E); } /* Commande fermee : indisponible, ou tarif pas encore arbitre. */ .elx-form-off { text-align: center; } .elx-form-off-t { font-weight: 600; color: var(--el-ink, #14211C); margin: 0 0 6px; } .elx-form-off-p { font-size: var(--fs-micro, 14px); color: var(--el-body, #3D4B45); margin: 0 0 18px; } /* Le champ quantite est un `number` : on retire les fleches natives, la landing fournit deja ses deux boutons. */ .elx-page .qty__in::-webkit-outer-spin-button, .elx-page .qty__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .elx-page .qty__in { -moz-appearance: textfield; appearance: textfield; } /* ----------------------------------------------------------------------------- 6 . MESSAGES WOOCOMMERCE ----------------------------------------------------------------------------- Un ajout au panier refuse (stock insuffisant, produit indisponible) doit se voir sur la fiche, dans la langue graphique de la page. -------------------------------------------------------------------------- */ .elx-notices { max-width: var(--wrap, 1320px); margin: 0 auto; padding: 20px var(--gut, 20px) 0; } .elx-notices ul { margin: 0; padding: 0; list-style: none; } .elx-notices .woocommerce-error, .elx-notices .woocommerce-message, .elx-notices .woocommerce-info { margin: 0 0 12px; padding: 14px 18px; border-radius: var(--r, 6px); border: 1px solid var(--el-line, #E3DACA); background: var(--el-paper, #FFFDF9); font-size: 15px; line-height: 1.55; color: var(--el-ink, #14211C); } .elx-notices .woocommerce-error { border-color: rgba(168, 50, 42, .38); background: rgba(168, 50, 42, .06); } .elx-notices .woocommerce-message { border-color: rgba(46, 125, 91, .38); background: rgba(46, 125, 91, .06); } .elx-notices a { color: var(--el-gold-ink, #7A5C24); } /* ----------------------------------------------------------------------------- 7 . REFERENCE PRODUIT -------------------------------------------------------------------------- */ .elx-sku { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--el-muted, #4E5C55); } /* ----------------------------------------------------------------------------- 8 . RACCORD AVEC LE THEME ----------------------------------------------------------------------------- La barre d'action fixe du theme (`.zm-has-fixedcta`) est desactivee sur les fiches produit par elafya_show_fixed_cta() : la landing a la sienne. On s'assure seulement que les deux ne se superposent jamais. -------------------------------------------------------------------------- */ body.zm-has-fixedcta .elx-page .sticky { bottom: 0; } /* Le pied de page du theme suit immediatement la derniere section de la fiche : aucune marge parasite entre les deux. */ .elx-page > :last-child { margin-bottom: 0; }