/** Shopify CDN: Minification failed Line 284:0 Unexpected "}" **/ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&display=swap'); /* ============================================================ MYLIA — DIRECTION ARTISTIQUE + BLOC HAUT DE LA FICHE Étalon : IM8 (im8health.com), relevé aux captures mobile du 29/07 + getComputedStyle pour les valeurs. Palette : 11-IDENTITE-MARQUE-ET-DA.md §5 — elle vient du pack. Polices : aucune police d'IM8. Fraunces remplace la serif flare, Inter la grotesque. Un seul fichier : un @import relatif vers une autre feuille n'emporte pas le numéro de version de Shopify, donc le CDN servait indéfiniment la première version. Tout vit ici. ============================================================ */ :root { --myl-encre: #2E2359; --myl-accent: #F2557E; --myl-accent-d: #C43A61; --myl-fond: #FBF3F0; --myl-fond-2: #EFEAF7; --myl-ligne: #E4DDF1; --myl-doux: #6B6383; --myl-titre: 'Fraunces', Georgia, 'Times New Roman', serif; --myl-ombre: 0 6px 18px rgba(46, 35, 89, .26), 0 2px 4px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .15); } /* ===== 1. LES TITRES ======================================== */ h1, h2, .h0, .h1, .h2 { font-family: var(--myl-titre); color: var(--myl-encre); text-wrap: balance; font-variation-settings: 'SOFT' 25, 'WONK' 0; } h1, .h0, .h1 { font-size: 2.8rem; line-height: 1.08; letter-spacing: -0.01em; font-weight: 400; } h2, .h2 { font-size: 2.6rem; line-height: 1.20; letter-spacing: -0.01em; font-weight: 500; } h3, .h3, h4, .h4 { color: var(--myl-encre); letter-spacing: -0.005em; font-weight: 600; line-height: 1.3; } h3, .h3 { font-size: 1.7rem; } @media screen and (min-width: 750px) { h1, .h0, .h1 { font-size: 4.4rem; } h2, .h2 { font-size: 3.4rem; } h3, .h3 { font-size: 1.9rem; } } /* ===== 2. LE CORPS — une seule encre ======================== */ body { color: var(--myl-encre); letter-spacing: normal; } p, li, .rte { line-height: 1.45; } p, .rte { text-wrap: pretty; } @media screen and (min-width: 750px) { p, li, .rte { font-size: 1.6rem; } } .caption, .product__tax, .tax-note, .rte small, small { color: var(--myl-doux); font-size: 1.3rem; line-height: 1.4; } /* ===== 3. LE SECOND REGISTRE — grotesque traquée ============ */ .caption-with-letter-spacing, .mhero-eyebrow.mhero-eyebrow, .mpda-eyebrow.mpda-eyebrow, .myl-aa-eyebrow.myl-aa-eyebrow, .myl-cta-eyebrow.myl-cta-eyebrow, .myl-declic-eyebrow.myl-declic-eyebrow, .myl-meca-eyebrow.myl-meca-eyebrow, .myl-off-eyebrow.myl-off-eyebrow, .myl-temo-eyebrow.myl-temo-eyebrow { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--myl-encre); } .badge, .myl-off-save.myl-off-save, .mhero-badge.mhero-badge, .myl-aa-badge.myl-aa-badge, .myl-rb-tag.myl-rb-tag { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; border-radius: 999px; } .price, .price-item, .myl-off-price.myl-off-price { font-family: var(--myl-titre); font-weight: 400; letter-spacing: -0.01em; color: var(--myl-encre); } .price .price-item--regular { font-size: 2.6rem; line-height: 1.1; } .header__menu-item, .list-menu__item--link { font-weight: 600; letter-spacing: 0.04em; font-size: 1.4rem; } .footer-block__heading { font-family: var(--myl-titre); font-weight: 500; letter-spacing: -0.01em; } /* ===== 4. LES BOUTONS ======================================= */ .button, .shopify-payment-button__button--unbranded, .product-form__submit, .cart__checkout-button { border-radius: 999px; text-transform: uppercase; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; } .product-form__submit, .cart__checkout-button { background: var(--myl-encre); color: #FFFFFF; border: 0; width: 100%; padding-top: 1.9rem; padding-bottom: 1.9rem; box-shadow: var(--myl-ombre); } .product-form__submit:hover, .cart__checkout-button:hover { background: #241B47; box-shadow: var(--myl-ombre); } .mylia-accent-text { color: var(--myl-accent-d); } /* ===== 5. LES CARTES ======================================== */ .card, .card-wrapper, .card__inner, .collapsible-content__header, .multicolumn-card, .product-media-container, .quantity, .media { box-shadow: none; } hr, .accordion, .product__accordion, .collapsible-content__header, .footer__content-bottom, .facets__summary, .cart-items thead th { border-color: var(--myl-ligne); } /* ============================================================ 6. LE BLOC HAUT DE LA FICHE Tous les textes viennent de blocs natifs Dawn, modifiables au clic. Ci-dessous, uniquement la forme. ============================================================ */ /* ---- L'image affichée est TOUJOURS au carré, sur tous les écrans. On passe par le mécanisme de ratio de Dawn (padding-top sur .media), sinon la diapo la plus haute impose sa hauteur à la rangée et laisse une bande blanche. */ .product__media-wrapper .product-media-container, .product__media-wrapper .product-media-container.constrain-height { max-height: none !important; } .product__media-wrapper .product-media-container .media { padding-top: 100% !important; height: auto !important; } .product__media-wrapper .product-media-container img { object-fit: cover; } @media screen and (max-width: 749px) { /* En mobile l'image colle à l'en-tête et va bord à bord. Dawn met un carrousel « peek » : diapo plus étroite que l'écran. */ .product .product__media-wrapper { margin: 0 -1.5rem !important; width: calc(100% + 3rem) !important; max-width: none !important; padding: 0 !important; } .product__media-wrapper .product__media-list { gap: 0 !important; padding: 0 !important; margin: 0 !important; align-items: flex-start !important; scroll-padding: 0 !important; } .product__media-wrapper .product__media-list > .product__media-item { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; margin: 0 !important; align-items: flex-start !important; } .product__media-wrapper .product-media-container { width: 100% !important; max-width: none !important; border-radius: 0 !important; border: 0 !important; } .product__media-wrapper .product-media-container .media { border-radius: 0; border: 0; } .product__media-wrapper .slider--mobile { padding: 0 !important; } .product__media-wrapper .thumbnail-slider { padding: 1.2rem 1.5rem 0 !important; } } /* ---- Les miniatures : petites, carrées, l'active cerclée ---- */ .thumbnail-slider .thumbnail-list { gap: .6rem; } .thumbnail-list__item { width: 6.4rem !important; flex: 0 0 6.4rem; } .thumbnail-list__item .thumbnail { border-radius: 8px; border: 1px solid var(--myl-ligne); box-shadow: none; } .thumbnail-list__item .thumbnail[aria-current] { border: 2px solid var(--myl-encre); box-shadow: none; } .thumbnail-slider .slider-button { color: var(--myl-encre); } /* ---- Le bouton crème. Son filet du bas = barre haute de la ligne de preuve. */ .product__info-container modal-opener.product-popup-modal__opener { display: block; margin: 1.8rem 0 0; padding-bottom: 1.8rem; border-bottom: 1px solid var(--myl-ligne); } .product-popup-modal__button.link { display: flex; align-items: center; justify-content: center; gap: .8rem; width: 100%; padding: 1.6rem 2rem; background: var(--myl-fond); border: 1px solid var(--myl-ligne); border-radius: 999px; color: var(--myl-encre); font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; } .product-popup-modal__button.link::before { content: ""; width: 15px; height: 17px; flex: 0 0 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* ---- La ligne de preuve : étoiles + note + second chiffre, sur UNE ligne, entre les deux barres. */ .product__info-container .rating-text, .product__info-container .rating-count { display: none !important; } .product__info-container .rating-wrapper { display: inline-flex; align-items: center; vertical-align: middle; margin: 1.4rem 0; } .product__info-container .rating-star { --color-icon: var(--myl-accent); color: var(--myl-accent); font-size: 1.05rem; letter-spacing: 0; } .product__info-container .rating-wrapper + .product__text:not(.caption-with-letter-spacing):not(.subtitle), .product__info-container .product__text:not(.caption-with-letter-spacing):not(.subtitle) + .product__text:not(.caption-with-letter-spacing):not(.subtitle) { display: inline-block; vertical-align: middle; margin: 1.4rem 0; font-size: 1.25rem; font-weight: 600; color: var(--myl-encre); white-space: nowrap; } .product__info-container .rating-wrapper + .product__text:not(.caption-with-letter-spacing):not(.subtitle) { margin-left: .7rem; } .product__info-container .product__text:not(.caption-with-letter-spacing):not(.subtitle) + .product__text:not(.caption-with-letter-spacing):not(.subtitle) { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid var(--myl-ligne); font-weight: 400; } /* ---- Le sur-titre porte la barre du bas -------------------- */ .product__info-container .product__text.caption-with-letter-spacing { display: block; border-top: 1px solid var(--myl-ligne); padding-top: 1.8rem; margin: 0 0 .8rem; font-size: 1.1rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--myl-encre); opacity: 1; } .product__info-container .product__title { margin-top: 0; } .product__info-container .product__title h1 { margin: 0; } /* ---- Les deux pastilles sous le titre. Deux blocs Texte natifs en style « Majuscules », posés entre le titre et la description : le libellé se change au clic dans l'éditeur. L'icône suit l'ordre — lune pour la première, soleil pour la seconde. Elles tiennent sur UNE ligne : au-delà de ~18 signes par libellé, la seconde passe à la ligne. vertical-align: top — sinon les deux pilules s'alignent sur leur ligne de base et se décalent de 8 px l'une par rapport à l'autre (vu et corrigé le 29/07). */ .product__info-container .product__title + .product__text.caption-with-letter-spacing, .product__info-container .product__title + .product__text + .product__text.caption-with-letter-spacing { display: inline-flex; align-items: center; vertical-align: top; gap: .5rem; border: 1px solid var(--myl-ligne); border-radius: 10px; background: #FFFFFF; color: var(--myl-encre); padding: .5rem .9rem; margin: 1.2rem .5rem .2rem 0; font-size: .95rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .product__info-container .product__title + .product__text.caption-with-letter-spacing::before, .product__info-container .product__title + .product__text + .product__text.caption-with-letter-spacing::before { content: ""; flex: 0 0 12px; width: 12px; height: 12px; background: var(--myl-accent); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .product__info-container .product__title + .product__text + .product__text.caption-with-letter-spacing::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* ---- Les puces à coche. Un bloc Texte natif par puce, en style « Sous-titre ». */ .product__info-container > div[id^="price-"] { margin-bottom: 1.8rem; } .product__info-container .product__text.subtitle { display: flex; align-items: flex-start; gap: .9rem; margin: 0 0 1.1rem; padding: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.35; color: var(--myl-encre); text-transform: none; letter-spacing: normal; } .product__info-container .product__text.subtitle::before { content: ""; flex: 0 0 15px; width: 15px; height: 15px; margin-top: .35rem; background: var(--myl-accent); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* ---- Le sélecteur d'offres Kaching, habillé à la DA. L'app pose son propre balisage et ses propres réglages de couleur : on ne reprend QUE la forme, avec !important, parce qu'elle écrit en ligne. Les prix, les libellés et l'ordre des offres restent pilotés dans Kaching, pas ici. */ .kaching-bundles__block { margin: 2rem 0 1.6rem !important; } .kaching-bundles__block-title { font-size: 1.1rem !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--myl-encre) !important; } } .kaching-bundles__bar-full-price { color: var(--myl-doux) !important; font-weight: 400 !important; } .kaching-bundles__bar-radio { accent-color: var(--myl-accent); } /* Le filet sous les puces = bordure haute de la zone d'achat */ .product__info-container .product-form__quantity { border-top: 1px solid var(--myl-ligne); padding-top: 2rem; margin-top: 2rem; } /* ===== 7. GARDE-FOUS ======================================== */ html, body { overflow-x: hidden; max-width: 100%; } img, svg, video, table { max-width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }