/* Josefin Sans (poids 600) chargée ici pour que les BOUTONS du tiroir et du checkout aient la police de « Filtrer mon eau » : le checkout ne charge qu'Instrument Serif. @import doit précéder toute règle ; sur la page produit la police est déjà en cache. */ @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&display=swap'); /* --------------------------------------------------------------------------- Sourcia — chrome de la marque virtuelle (barre d'annonce, header, footer). Tokens repris du RELEVÉ MESURÉ de myoasishair.com/products/cabezal-oasis (temp_assets/replica/oasis-cabezal/releve.md, 2026-09-05) : la palette pondérée par fréquence (#304a4b 31 occ., #108474 13 occ., #f3f3f3, #dbdbdb), les rayons (8px / 12px / 50%), les breakpoints (750px, 990px) et les familles de polices déclarées (DM Sans, Josefin Sans). CSS 100 % original. Le CSS de la PAGE produit vit dans son template, scopé sous `.sc-page`. Préfixe unique `.sc-` : une marque virtuelle ne doit rien pouvoir casser ailleurs sur le domaine. --------------------------------------------------------------------------- */ :root { --sc-ink: #121212; --sc-ink-2: #4a5658; --sc-deep: #2c4a4b; --sc-accent: #108474; --sc-cream: #faf6f0; --sc-soft: #f3f3f3; --sc-border: #dbdbdb; --sc-stars: #ebbf20; --sc-radius: 8px; --sc-radius-lg: 12px; --sc-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sc-display: 'Josefin Sans', 'DM Sans', sans-serif; } /* --- Le tiroir panier, le checkout et le suivi parlent Sourcia ------------ Le tiroir et le checkout sont des surfaces PARTAGEES : un seul composant sert toutes les marques. On ne le duplique pas — on lui donne d'autres valeurs. Les noms `--aur-*` sont ceux de static/css/aurelia-checkout-skin.css, qui porte les defauts d'Anchored Beauty. ⚠️ La specificite est le tout du bloc. `:root { --aur-primary: ... }` NU ne marcherait PAS : aurelia est chargee APRES cette feuille (templates/base.html) et son propre `:root` gagnerait a egalite. `:root[data-brand-shell="sourcia"]` pese (0,1,1) contre (0,0,1) : il gagne quel que soit l'ordre. L'attribut est pose sur par base.html quand la marque est active. --------------------------------------------------------------------------- */ :root[data-brand-shell="sourcia"] { --aur-primary: #108474; /* le vert d'eau de la marque */ --aur-primary-rgb: 16, 132, 116; --aur-primary-hover: #2c4a4b; --aur-primary-light: #4fb3a3; --aur-primary-deep: #0c6a5d; --aur-accent-2: #2c4a4b; --aur-accent-2-rgb: 44, 74, 75; --aur-accent-2-light: #4a6b6c; --aur-bg-soft: #f4f8f7; /* le creme beaute deviendrait un corps etranger */ --aur-bg-accent: #eef6f4; --aur-border: #dbdbdb; --aur-border-soft: #e8eceb; --aur-border-strong: #9fb8b4; --aur-text: #121212; --aur-text-muted: #4a5658; --aur-panel-bg: #ffffff; /* pas de creme : l'univers est clair */ --aur-panel-bg-rgb: 255, 255, 255; --aur-tint-1: #eef6f4; --aur-tint-2: #f3f8f7; --aur-tint-3: #eef6f4; --aur-tint-4: #f7fbfa; --aur-tint-5: #e3f0ed; --aur-tint-6: #eef6f4; /* Urgence : la meme fonction, le meme poids visuel, l'autre famille. */ --aur-urgency-bg-1: #eef6f4; --aur-urgency-bg-2: #dceeea; --aur-urgency-border: #b9dcd5; --aur-urgency-text: #1d3e3a; --aur-urgency-accent: #108474; --aur-font: var(--sc-font); } /* --- Wordmark : lockup « Anchored / sourcia », rendu en TEXTE ------------- Le lien restera toujours anchored.fr : la marque maison est donc assumée dans le nom plutôt que cachée. « Anchored » en surtitre discret, « sourcia » en signature — la niche reste ce qu'on lit en premier. Pas d'image : aucune dépendance S3 pour le logo, et rien à recharger. */ /* GRILLE, pas flex. En flex, les deux enfants (`__house` et `__line`) devenaient des items d'une meme RANGEE : « ANCHORED » se retrouvait a cote de « sourcia » au lieu d'etre au-dessus. La grille laisse le mark occuper la colonne de gauche sur les DEUX rangs, et les deux lignes de texte s'empiler a droite — sans toucher au markup, qui est partage avec le checkout. */ .sc-wordmark { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; line-height: 1; text-align: left; } /* Le MARK, pose en background sur un ::before plutot qu'en balise. Pourquoi : `.sc-wordmark` est rendu par TROIS templates — la navbar, le footer et le checkout, ce dernier etant PARTAGE avec les autres marques de la maison. Toucher son markup obligerait a le modifier pour tout le monde ; le faire en CSS depuis la feuille de la marque n'engage que Sourcia, et le mark apparait aux trois endroits du meme coup. */ .sc-wordmark::before { content: ''; grid-column: 1; grid-row: 1 / 3; /* le mark enjambe les deux lignes de texte */ align-self: center; width: 1.92em; height: 1.92em; background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2032%2032%22%20width=%2232%22%20height=%2232%22%20role=%22img%22%20aria-label=%22Anchored%20Sourcia%22%3E%3Cdefs%3E%3CclipPath%20id=%22sc-drop%22%3E%3Cpath%20d=%22M16%202.2%20C17.6%206.4%2020.9%2010.2%2023.1%2013.6%20C24.6%2015.9%2025.4%2017.6%2025.4%2019.4%20A9.4%209.4%200%201%201%206.6%2019.4%20C6.6%2017.6%207.4%2015.9%208.9%2013.6%20C11.1%2010.2%2014.4%206.4%2016%202.2%20Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath%20d=%22M16%202.2%20C17.6%206.4%2020.9%2010.2%2023.1%2013.6%20C24.6%2015.9%2025.4%2017.6%2025.4%2019.4%20A9.4%209.4%200%201%201%206.6%2019.4%20C6.6%2017.6%207.4%2015.9%208.9%2013.6%20C11.1%2010.2%2014.4%206.4%2016%202.2%20Z%22%20fill=%22none%22%20stroke=%22%232c4a4b%22%20stroke-width=%222.1%22/%3E%3Cg%20clip-path=%22url%28%23sc-drop%29%22%3E%3Crect%20x=%220%22%20y=%2221.1%22%20width=%2232%22%20height=%2232%22%20fill=%22%232c4a4b%22/%3E%3Crect%20x=%220%22%20y=%2217.2%22%20width=%2232%22%20height=%223.9%22%20fill=%22%23108474%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } .sc-wordmark__house { display: block; grid-column: 2; grid-row: 1; font-family: var(--sc-font); font-size: .58rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--sc-accent); margin-bottom: 3px; /* Le letter-spacing ajoute un blanc APRES la derniere lettre. Sur un lockup centre il fallait un `text-indent` compensatoire ; aligne a gauche contre le mark, c'est l'inverse — on retire l'indentation, sinon les deux lignes ne partent pas du meme bord. */ text-indent: 0; } .sc-wordmark__line { display: block; grid-column: 2; grid-row: 2; font-family: var(--sc-display); font-weight: 300; font-size: 1.72rem; letter-spacing: .01em; color: var(--sc-ink); } .sc-wordmark--footer { text-align: left; } /* Sur fond sombre, le mark passe en creme — sinon son contour vert profond disparait dans le fond. */ .sc-wordmark--footer::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2032%2032%22%20width=%2232%22%20height=%2232%22%20role=%22img%22%20aria-label=%22Anchored%20Sourcia%22%3E%3Cdefs%3E%3CclipPath%20id=%22sc-drop%22%3E%3Cpath%20d=%22M16%202.2%20C17.6%206.4%2020.9%2010.2%2023.1%2013.6%20C24.6%2015.9%2025.4%2017.6%2025.4%2019.4%20A9.4%209.4%200%201%201%206.6%2019.4%20C6.6%2017.6%207.4%2015.9%208.9%2013.6%20C11.1%2010.2%2014.4%206.4%2016%202.2%20Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath%20d=%22M16%202.2%20C17.6%206.4%2020.9%2010.2%2023.1%2013.6%20C24.6%2015.9%2025.4%2017.6%2025.4%2019.4%20A9.4%209.4%200%201%201%206.6%2019.4%20C6.6%2017.6%207.4%2015.9%208.9%2013.6%20C11.1%2010.2%2014.4%206.4%2016%202.2%20Z%22%20fill=%22none%22%20stroke=%22%23faf6f0%22%20stroke-width=%222.1%22/%3E%3Cg%20clip-path=%22url%28%23sc-drop%29%22%3E%3Crect%20x=%220%22%20y=%2221.1%22%20width=%2232%22%20height=%2232%22%20fill=%22%23faf6f0%22/%3E%3Crect%20x=%220%22%20y=%2217.2%22%20width=%2232%22%20height=%223.9%22%20fill=%22%23108474%22/%3E%3C/g%3E%3C/svg%3E"); } .sc-wordmark--footer .sc-wordmark__line { color: var(--sc-cream); font-size: 1.55rem; } .sc-wordmark--footer .sc-wordmark__house { color: #9fb5b3; } @media (max-width: 400px) { .sc-wordmark__line { font-size: 1.5rem; } .sc-wordmark__house { font-size: .54rem; letter-spacing: .22em; text-indent: .22em; } } /* --- Barre d'annonce ---------------------------------------------------- */ /* Le compte à rebours de l'offre accompagne TOUTE la page, donc la barre colle en haut (fondateur 2026-09-07). Elle passe de 9 px à 5 px de padding : une barre collante prend de la hauteur sur chaque écran de la page, et sur un téléphone chaque pixel volé au contenu est un pixel de moins pour vendre. ⚠️ `--sc-announce-h` est la hauteur réelle de cette barre : c'est elle qui décale le header collant juste en dessous. Les deux valeurs sont liées — changer l'une sans l'autre superpose le header sur le bandeau. */ :root { --sc-announce-h: 34px; } /* 28 → 34 px le 2026-09-15 : le message a grossi */ .sc-announce { position: sticky; top: 0; z-index: 41; /* au-dessus du header (40), qui colle sous elle */ background: var(--sc-deep); color: #f3efe7; font-family: var(--sc-font); font-size: .84rem; letter-spacing: .03em; } /* Messages tournants : un seul visible, les autres attendent a droite. */ .sc-announce__rot { position: relative; width: 100%; height: calc(var(--sc-announce-h) - 10px); overflow: hidden; text-align: center; } /* `display: block` et non flex : en flex, l'espace entre et le texte qui suit disparaît (« Livraison gratuiteen France », vu le 15/09). */ .sc-announce__msg { position: absolute; inset: 0; display: block; line-height: calc(var(--sc-announce-h) - 10px); text-align: center; white-space: nowrap; opacity: 0; transform: translateX(60%); transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .35s ease; pointer-events: none; } .sc-announce__msg strong { font-weight: 700; color: #fff; } .sc-announce__msg.is-on { opacity: 1; transform: translateX(0); } .sc-announce__msg.is-out { opacity: 0; transform: translateX(-60%); } .sc-announce__msg.is-in { transition: none; transform: translateX(60%); opacity: 0; } @media (prefers-reduced-motion: reduce) { .sc-announce__msg { transition: none; transform: none; } } /* Rappel de l'offre de lancement dans le tiroir, juste sous « Mon panier » (composant partage, rendu seulement si la marque declare `offer_note`). */ :root[data-brand-shell="sourcia"] .brand-offer-strip { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 0; padding: 8px 12px; background: #fdecea; color: #c0392b; font-family: var(--sc-font); font-size: 12.5px; line-height: 16px; font-weight: 700; text-align: center; border-bottom: 1px solid #f6d3cf; } .sc-announce__inner { max-width: 1200px; margin: 0 auto; padding: 5px 16px; min-height: var(--sc-announce-h); display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; flex-wrap: nowrap; /* une seule ligne : la barre ne doit jamais doubler */ } .sc-announce__sep { opacity: .45; } /* --- Header collant ----------------------------------------------------- */ .sc-header { position: sticky; top: var(--sc-announce-h); /* sous la barre d'annonce, qui colle elle aussi */ z-index: 40; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--sc-border); font-family: var(--sc-font); } .sc-nav { max-width: 1200px; margin: 0 auto; padding: 0 16px; min-height: 68px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 12px; } .sc-nav__burger { width: 44px; height: 44px; border: 0; background: transparent; padding: 11px 9px; display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; border-radius: var(--sc-radius); } .sc-nav__burger span { display: block; height: 2px; width: 100%; background: var(--sc-ink); border-radius: 2px; } .sc-nav__brand { justify-self: center; text-decoration: none; min-width: 0; } .sc-nav__cart { justify-self: end; position: relative; color: var(--sc-ink); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; text-decoration: none; } .sc-nav__cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 50%; background: var(--sc-accent); color: #fff; font-size: .68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .sc-nav__menu { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0 0 14px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--sc-border); margin-top: 4px; } /* Le menu est replié par défaut sur mobile. On pose la règle sur la CLASSE elle-même : un `display` d'auteur bat l'attribut [hidden], piège déjà payé. */ .sc-nav__menu:not(.is-open) { display: none; } .sc-nav__menu a { display: block; padding: 12px 4px; color: var(--sc-ink); text-decoration: none; font-size: .95rem; } .sc-nav__menu a[aria-current="page"] { color: var(--sc-accent); font-weight: 600; } @media (min-width: 750px) { /* ⚠️ Placement EXPLICITE des trois zones. L'ordre du DOM est burger → wordmark → panier → menu ; en placement automatique le menu tombait donc dans la 1re colonne et le wordmark dans la 2e, ne laissant que 12 px entre le dernier lien et le wordmark (mesuré aux rectangles à 1440 px). Le header d'une source ne se recopie pas tel quel : le nombre de liens et la longueur des libellés ne sont jamais les mêmes. */ .sc-nav { grid-template-columns: auto 1fr auto; min-height: 78px; column-gap: 32px; } .sc-nav__burger { display: none; } .sc-nav__brand { grid-column: 1; grid-row: 1; justify-self: start; } .sc-nav__cart { grid-column: 3; grid-row: 1; justify-self: end; } .sc-nav__menu, .sc-nav__menu:not(.is-open) { display: flex; grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; justify-content: center; gap: 26px; border-top: 0; margin-top: 0; padding: 0; } .sc-nav__menu a { padding: 6px 0; white-space: nowrap; } } /* --- Footer ------------------------------------------------------------- */ .sc-footer { background: var(--sc-deep); color: #d9e2e1; font-family: var(--sc-font); margin-top: 48px; } .sc-footer__top { max-width: 1200px; margin: 0 auto; padding: 44px 16px 28px; display: grid; grid-template-columns: 1fr; gap: 32px; } .sc-footer__top > * { min-width: 0; } .sc-footer__baseline { margin: 12px 0 18px; font-family: var(--sc-display); font-size: 1.05rem; color: #f3efe7; } .sc-footer__contact { margin: 0; font-size: .9rem; line-height: 1.7; } .sc-footer__contact a { color: #fff; text-decoration: underline; } .sc-footer__hours { opacity: .7; font-size: .82rem; } .sc-footer__title { font-family: var(--sc-font); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #9fb5b3; margin: 0 0 14px; font-weight: 600; } .sc-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .sc-footer__links a { color: #d9e2e1; text-decoration: none; font-size: .92rem; } .sc-footer__links a:hover { color: #fff; text-decoration: underline; } .sc-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .14); } .sc-footer__bottom > * { max-width: 1200px; margin: 0 auto; padding: 0 16px; } .sc-footer__payments { padding-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: .8rem; color: #9fb5b3; } .sc-footer__cards { color: #d9e2e1; } .sc-footer__legal { padding-bottom: 26px; padding-top: 10px; font-size: .78rem; color: #8ea5a3; line-height: 1.6; } @media (min-width: 750px) { .sc-footer__top { grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; } } /* --- Compte à rebours du bandeau d'annonce ------------------------------- Il compte la limite d'EXPÉDITION du jour, pas une fin de promo (cf. le commentaire du navbar). Sur mobile il passe à la ligne sous les mentions plutôt que de les comprimer. */ .sc-announce__cd { display: inline-flex; align-items: center; gap: 7px; justify-content: center; min-width: 0; } /* Le libellé se laisse tronquer avant l'horloge : c'est le CHIFFRE qui porte l'urgence, pas la phrase. Sur un écran étroit on perd la fin du libellé, jamais les secondes. */ .sc-announce__cd-label { opacity: .85; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-announce__cd-clock { font-variant-numeric: tabular-nums; letter-spacing: .06em; font-weight: 700; background: rgba(255, 255, 255, .12); border-radius: 5px; padding: 1px 6px; /* Largeur figée : sans ça, la barre tressaute à chaque seconde. */ min-width: 8ch; text-align: center; } @media (max-width: 420px) { /* Très petit écran : le message reste sur une ligne, un cran plus petit. */ .sc-announce { font-size: .78rem; } } /* --- Header du CHECKOUT : le même lockup que le site (ANCHORED / sourcia) --- Le template du checkout est partagé : il rend le lockup avec la classe que la marque déclare (`brand_shell_wordmark_class`), donc `.sc-wordmark` ci-dessus fait déjà tout le travail typographique. Il ne reste qu'à le caler à la hauteur de l'en-tête du checkout (30 px), plus serré que sur le site. ⚠️ `:root[data-brand-shell="sourcia"]` et non `:root` nu : le skin de checkout partagé est chargé APRÈS cette feuille et son propre `:root` gagnerait à égalité. (0,1,1) contre (0,0,1) — celui-ci gagne quel que soit l'ordre. */ :root[data-brand-shell="sourcia"] .ck-header__brand-text { display: none; } :root[data-brand-shell="sourcia"] .ck-header__lockup { display: inline-block; line-height: 1; text-align: center; } :root[data-brand-shell="sourcia"] .ck-header__lockup .sc-wordmark__house { font-size: .46rem; letter-spacing: .24em; text-indent: .24em; margin-bottom: 3px; } :root[data-brand-shell="sourcia"] .ck-header__lockup .sc-wordmark__line { font-size: 1.45rem; } /* ═══════════════════════════════════════════════════════════════════════════ CHECKOUT — habillage de la marque. On ne clone PAS le checkout de la source (AGENTS.md impose UNE architecture de paiement stable) : on donne au notre les CODES de Sourcia — titres en Josefin Sans comme les `.sc-h2` de la page, surfaces dans le vert d'eau et le creme de la marque plutot que le beige d'Anchored Beauty. Aucun comportement touche : ni formulaire, ni validation, ni flux de paiement. La preuve sociale du bas de page reprend les avis REELS de la page produit (`shop/sourcia/avis.py` : 3 120 avis Judge.me verifies, 4,84/5, boutique espagnole, avec leurs vraies photos clientes). Elle n'a pu exister qu'une fois ces avis la : le bloc `ck-brandproof` ne se rend que si la marque declare `checkout.proof`, et tant qu'il n'y avait rien de reel a y mettre, la marque ne le declarait pas. ═══════════════════════════════════════════════════════════════════════════ */ /* Titres de section : la police d'affichage de la page produit. */ :root[data-brand-shell="sourcia"] .ck-section-title, :root[data-brand-shell="sourcia"] .ck-step-title, :root[data-brand-shell="sourcia"] .ck-bottom-reassurance__title { font-family: var(--sc-display); font-weight: 600; } :root[data-brand-shell="sourcia"] .ck-bottom-reassurance__title { font-size: 19px; line-height: 1.3; letter-spacing: .01em; text-transform: none; } /* `.ck-highlight` passe en serif italique (Instrument Serif) dans le skin partage : un corps etranger dans une page qui n'a aucun serif. */ :root[data-brand-shell="sourcia"] .ck-bottom-reassurance__title .ck-highlight { font-family: inherit; font-style: normal; color: var(--sc-accent); } /* Surfaces : le creme et le vert d'eau de la page, jamais le beige beaute. */ :root[data-brand-shell="sourcia"] .ck-bottom-reassurance { background: var(--sc-cream) !important; border: 1px solid #e8e0d4 !important; border-radius: var(--sc-radius-lg) !important; } :root[data-brand-shell="sourcia"] .ck-guarantee { background: #eef6f4 !important; border: 1px solid #cfe4df !important; border-radius: var(--sc-radius-lg) !important; } :root[data-brand-shell="sourcia"] .ck-bottom-reassurance__icon { background: #fff; border: 1px solid #e8e0d4; color: var(--sc-accent); } /* --- Preuve sociale du checkout ------------------------------------------ Markup : templates/cart/partials/_brand_social_proof.html. ⚠️ LES ETOILES DU CHECKOUT SONT BLEUES, PAS DOREES (fondateur 2026-09-09). Elles reprenaient l'or de la section avis de la page (`--sc-stars`, #ebbf20) ; au milieu d'un checkout entierement bleu-vert, ce jaune etait la seule tache chaude de la colonne et se voyait plus que ce qu'il note. Elles passent au bleu profond de la marque, celui du bouton d'achat et du bandeau d'offre. La page produit, elle, GARDE ses etoiles dorees : sur fond creme et au milieu de photos clientes, l'or est a sa place — c'est le contraste du checkout qui ne marchait pas, pas la couleur en soi. L'etoile eteinte reste grise : un avis a 4/5 doit se LIRE comme un 4/5, au checkout comme sur la page. */ :root[data-brand-shell="sourcia"] .ck-brandstars i { background: var(--sc-deep); } :root[data-brand-shell="sourcia"] .ck-brandstars i.off { background: #dcdcdc; } :root[data-brand-shell="sourcia"] .ck-brandstars--half i:last-child { background: linear-gradient(90deg, var(--sc-deep) 50%, #dcdce6 50%); } /* La note, posee a cote de la ligne « Livraison offerte et suivie » en haut de la colonne (cle `social_proof_note`). Meme grammaire d'etoiles que le reste du checkout, en plus petit : c'est un rappel, pas un bloc de preuve. */ :root[data-brand-shell="sourcia"] .ck-guarantee__fi .ck-brandstars i { width: 11px; height: 11px; } :root[data-brand-shell="sourcia"] .ck-guarantee__fi .ck-brandstars i::before { font-size: 8px; } :root[data-brand-shell="sourcia"] .ck-brandproof { font-family: var(--sc-font); } :root[data-brand-shell="sourcia"] .ck-brandproof__title { font-family: var(--sc-display); font-weight: 600 !important; } :root[data-brand-shell="sourcia"] .ck-brandproof__card { border-color: #e2e6e5; border-radius: var(--sc-radius-lg); box-shadow: 0 4px 16px rgba(0, 0, 0, .04); } :root[data-brand-shell="sourcia"] .ck-brandproof__card p { color: var(--sc-ink); } :root[data-brand-shell="sourcia"] .ck-brandproof__card small { color: var(--sc-ink-2); opacity: 1; font-weight: 600; } :root[data-brand-shell="sourcia"] .ck-brandproof__note { color: var(--sc-ink-2); } /* ===================================================================== TIROIR PANIER — nettoyage Sourcia (fondateur 2026-09-11, modèle Seoni). Scopé sur la marque : aucune autre marque ne bouge. Le tiroir est partagé et ses verts (#16a34a, #22c55e, #15803d) sont écrits en dur dans le composant : on les recouvre ici, on n'édite pas le composant. Ce qui disparaît : le compte à rebours, le bloc « forte demande », la jauge de cadeaux, la ligne « votre remise ». Ce qui reste : la carte produit, livraison offerte, garantie 30 jours, le total, le bouton, les logos, la note d'avis. ===================================================================== */ :root[data-brand-shell="sourcia"] #cartUrgencyHeader, :root[data-brand-shell="sourcia"] #cartFomoBlock, :root[data-brand-shell="sourcia"] #cartGiftProgress, :root[data-brand-shell="sourcia"] #cartSavingsRow { display: none !important; } /* La ligne produit : plus de liseré vert ni de dégradé, une carte blanche. */ :root[data-brand-shell="sourcia"] .cart-item--quantity-bundle, :root[data-brand-shell="sourcia"] .cart-panel-item.cart-item--quantity-bundle { border-left: 0; background: #fff; padding-left: 14px; } :root[data-brand-shell="sourcia"] .cart-item-quantity-bundle-badge { background: #eef6f4; color: #0c6a5d; border: 1px solid #cfe4df; box-shadow: none; font-weight: 600; letter-spacing: .01em; } :root[data-brand-shell="sourcia"] .cart-item-quantity-bundle-savings, :root[data-brand-shell="sourcia"] .cart-item-save-badge, :root[data-brand-shell="sourcia"] .cart-bundle-savings { background: transparent; color: var(--sc-accent); padding: 0; border-radius: 0; font-weight: 600; } :root[data-brand-shell="sourcia"] #cartDeliveryDate, :root[data-brand-shell="sourcia"] #cartShippingValue, :root[data-brand-shell="sourcia"] .shipping-free, :root[data-brand-shell="sourcia"] .cart-item-shipping-note--free, :root[data-brand-shell="sourcia"] .cart-item-remove--quantity-bundle, :root[data-brand-shell="sourcia"] .gift-item-price-free { color: var(--sc-accent) !important; } :root[data-brand-shell="sourcia"] .cart-item-remove--quantity-bundle:hover { color: var(--sc-deep) !important; } /* Une ligne cadeau qui traînerait dans un panier ouvert avant le 11/09 : sobre, pas verte. */ :root[data-brand-shell="sourcia"] .cart-panel-item--bundle-gift { border-left: 0; background: #fff; } :root[data-brand-shell="sourcia"] .gift-item-badge { background: #eef6f4; color: #0c6a5d; } :root[data-brand-shell="sourcia"] .gift-item-img-badge { background: var(--sc-accent); } :root[data-brand-shell="sourcia"] .gift-item-limited { display: none; } /* Le bouton de paiement dans la couleur du bouton d'achat de la page. */ :root[data-brand-shell="sourcia"] .cart-checkout-btn { background: var(--sc-deep); border-radius: 999px; } :root[data-brand-shell="sourcia"] .cart-checkout-btn:hover { background: #21393a; } /* Les deux perks (livraison, garantie) : même carte blanche que la ligne produit, plus de liseré ni de dégradé — c'est la grille de Seoni, une seule bordure fine. */ :root[data-brand-shell="sourcia"] .cart-panel-item--orange-perk { border-left: 0; background: #fff; box-shadow: none; border: 1px solid #e6e9e8; border-radius: 12px; } :root[data-brand-shell="sourcia"] .orange-perk-badge { background: #eef6f4; color: #0c6a5d; } /* LES BOUTONS DE PAIEMENT = « FILTRER MON EAU » (fondateur 2026-09-11) : même police (Josefin Sans 600, capitales, .06em), même pilule 999px sans bordure ni ombre, même fond --sc-deep. Le noir du tiroir (décision 04/09, tiroir Lumin'Or) est posé par `html:not(.dn-theme) #cartSlidePanel a.cart-checkout-btn { !important }` (1,1,2) ; on le recouvre à (1,3,2) en !important, pour Sourcia seulement. Réversible. ⚠️ Dans le TIROIR le bouton est un cran plus bas que sur la page (fondateur 2026-09-16 : « un peu trop gros ») : 13 px de padding et .95rem au lieu de 19 px / 1.02rem, soit 48 px de haut au lieu de 64 — la cible du pouce reste au-dessus des 44 px requis. Le bouton du checkout (`#submit-payment-btn`, plus bas) garde ses 19 px. */ html[data-brand-shell="sourcia"]:not(.dn-theme) #cartSlidePanel a.cart-checkout-btn { background: var(--sc-deep) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; padding: 13px 18px !important; min-height: 48px; margin-top: 7px; gap: 8px; font-family: var(--sc-display) !important; font-size: .95rem !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } html[data-brand-shell="sourcia"]:not(.dn-theme) #cartSlidePanel a.cart-checkout-btn:hover { background: #21393a !important; } :root[data-brand-shell="sourcia"] .cart-checkout-btn-label, :root[data-brand-shell="sourcia"] .cart-checkout-btn-price { font-family: var(--sc-display) !important; font-size: .95rem !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } /* Le bouton « Payer » du checkout partagé : `#submit-payment-btn.ck-submit-btn` (1,1,0) le met en noir 14px de rayon en !important ; recouvert à (1,2,0) pour Sourcia. */ :root[data-brand-shell="sourcia"] #submit-payment-btn.ck-submit-btn { background: var(--sc-deep) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; padding: 19px 20px !important; font-family: var(--sc-display) !important; font-size: 1.12rem !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } :root[data-brand-shell="sourcia"] #submit-payment-btn.ck-submit-btn:hover { background: #21393a !important; } :root[data-brand-shell="sourcia"] #submit-payment-btn.ck-submit-btn:disabled { background: #9fb0b0 !important; } /* ═══════════════════════════════════════════════════════════════════════════ LES UPSELLS (fondateur 2026-09-15) — trois surfaces partagées, rhabillées. Le popup après ATC (components/lumin_v5_upsell_modal.html) et le modal de la page de succès (static/css/components/success-upsell-modal.css) sont codés en orange / brun-or Lumin'Or, en dur. On ne les duplique pas : sous `data-brand-shell="sourcia"` on recolore, on remet la police d'affichage de la marque sur les titres et les boutons, on retire les ombres colorées. Le curseur « Protection colis » du checkout, lui, lit déjà les tokens --aur-* posés plus haut. ═══════════════════════════════════════════════════════════════════════════ */ /* --- Popup après l'ajout au panier ------------------------------------------ */ :root[data-brand-shell="sourcia"] .lumin-v5-upsell-modal { font-family: var(--sc-font); border-radius: 14px; } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-badge { background: var(--sc-accent); border-radius: 999px; padding: 4px 10px; letter-spacing: .06em; } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-title { font-family: var(--sc-display); font-weight: 600; font-size: 19px; color: var(--sc-ink); letter-spacing: .01em; } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-name { color: var(--sc-deep); font-weight: 600; } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-price { color: var(--sc-deep); font-family: var(--sc-display); font-weight: 600; } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-price-old { color: #9aa5a3; } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-desc { color: var(--sc-ink-2); } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-proof { color: var(--sc-accent); } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-carousel-wrap { background: #fff; height: 300px; } :root[data-brand-shell="sourcia"] .lumin-v5-carousel-dot.is-active { background: var(--sc-accent); } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-btn--accept { background: var(--sc-deep); box-shadow: none; border-radius: 999px; font-family: var(--sc-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-btn--accept:hover { background: #21393a; } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-btn--decline { border-radius: 999px; border-color: var(--sc-border); color: var(--sc-ink-2); font-family: var(--sc-font); font-weight: 500; } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-trust { display: none !important; } :root[data-brand-shell="sourcia"] .lumin-v5-upsell-desc-toggle { color: var(--sc-accent); } /* --- Modal de la page de succès (post-achat) ------------------------------- */ :root[data-brand-shell="sourcia"] .success-upsell-modal { background: #fff; border-color: var(--sc-border); box-shadow: 0 20px 50px rgba(44, 74, 75, .22); font-family: var(--sc-font); border-radius: 14px; } :root[data-brand-shell="sourcia"] .success-upsell-badge { background: #eef6f4; border-color: #cfe3df; color: #0c6a5d; } :root[data-brand-shell="sourcia"] .success-upsell-name { color: var(--sc-accent); } :root[data-brand-shell="sourcia"] .success-upsell-title { font-family: var(--sc-display); font-weight: 600; color: var(--sc-ink); font-size: 18px; letter-spacing: .01em; } :root[data-brand-shell="sourcia"] .success-upsell-subtitle { color: var(--sc-ink-2); } :root[data-brand-shell="sourcia"] .success-upsell-proof { color: var(--sc-accent); } :root[data-brand-shell="sourcia"] .success-upsell-price-old { color: #9aa5a3; } :root[data-brand-shell="sourcia"] .success-upsell-price-new { color: var(--sc-deep); font-family: var(--sc-display); font-weight: 600; } :root[data-brand-shell="sourcia"] .success-upsell-save { background: #eef6f4; color: #0c6a5d; } :root[data-brand-shell="sourcia"] .success-upsell-cta-copy { color: var(--sc-ink-2); } :root[data-brand-shell="sourcia"] .success-upsell-button { background: var(--sc-deep); box-shadow: none; border-radius: 999px; font-family: var(--sc-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 13.5px; } :root[data-brand-shell="sourcia"] .success-upsell-button:hover:not(:disabled) { background: #21393a; transform: none; } :root[data-brand-shell="sourcia"] .success-upsell-button.is-success { background: var(--sc-accent); box-shadow: none; } :root[data-brand-shell="sourcia"] .success-upsell-decline { color: var(--sc-ink-2); } :root[data-brand-shell="sourcia"] .success-upsell-decline:hover { color: var(--sc-ink); } :root[data-brand-shell="sourcia"] .success-upsell-inline-note { font-family: var(--sc-font); } /* La description du popup est clampée à 2 lignes (1 sur mobile) par le composant, sans « Voir plus » hors mode vidéo : chez Sourcia elle porte l'argument (fenêtre transparente, cartouche remplaçable) — on laisse 4 lignes, le modal défile si l'écran est petit. */ :root[data-brand-shell="sourcia"] .lumin-v5-upsell-desc { -webkit-line-clamp: 4; font-size: 12.5px; line-height: 1.42; } @media (max-width: 600px) { :root[data-brand-shell="sourcia"] .lumin-v5-upsell-desc { -webkit-line-clamp: 4; font-size: 12px; } } /* Le sous-titre du modal post-achat est clampé à 3 lignes par le composant : on en laisse 5 (le modal défile), pour que l'argument (durée d'une cartouche, à qui on l'offre) se lise. */ :root[data-brand-shell="sourcia"] .success-upsell-subtitle { -webkit-line-clamp: 5; } /* Tiroir : la pastille « 🔥 Offre limitée » (dégradé orange) posée par cart-slide-panel.js sur toute ligne d'upsell pré-achat ne se rend pas chez Sourcia (fondateur 2026-09-15 : « ça fait pas très beau »). Le prix barré et le « Économie 33 % » de la ligne suffisent, comme sur le pommeau. Lumin'Or garde la sienne. */ :root[data-brand-shell="sourcia"] .cart-item-upsell-limited-badge { display: none !important; } /* ===================================================================== TIROIR — EN-TÊTE ET PIED RESSERRÉS (fondateur 2026-09-16). Mesuré à 390×844 avant : en-tête 85 px, pied 264 px — il restait 393 px aux articles, moins de la moitié de l'écran, alors que c'est CE que la cliente vient vérifier. Cause : le skin partagé (static/css/ aurelia-checkout-skin.css) pose `padding: 20px 24px !important` sur l'en-tête ET sur le récapitulatif, et le composant dessine une croix de 44 px sur pastille. Modèle : les tiroirs de myoasishair.com et de miraglowup.com — en-tête d'une quarantaine de pixels, croix nue, logos de paiement d'une vingtaine de pixels, une seule ligne de réassurance. Scopé sur la marque ; même niveau que le skin (`!important`) mais sur les seules propriétés qu'il verrouille. Aucune autre marque ne bouge. ===================================================================== */ /* En-tête : 44 px (6 + 32 + 6), titre 16/20 en DM Sans, croix nue de 32 px. Le composant met 44 px sur `.cart-panel-close` (0,1,0) et la pastille `--aur-tint-1` ; recouvert à (1,2,1). */ :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-panel-header { padding: 6px 8px 6px 14px !important; } :root[data-brand-shell="sourcia"] #cartSlidePanel #cart-panel-title { font-family: var(--sc-font); font-size: 16px; line-height: 20px; font-weight: 600; color: var(--sc-ink); letter-spacing: 0; gap: 5px; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-panel-count { font-size: 14px; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-panel-count-label { font-size: 12px; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-panel-close { width: 32px; height: 32px; background: transparent; border: 0; border-radius: 50%; color: var(--sc-ink); } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-panel-close:hover { background: var(--sc-soft); color: var(--sc-ink); } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-panel-close i { font-size: 18px; } /* Le rappel d'offre : une ligne de 28 px au lieu de 33. */ :root[data-brand-shell="sourcia"] #cartSlidePanel .brand-offer-strip { padding: 6px 12px; } /* « Chez vous dès le … » quitte le tiroir (fondateur 2026-09-16 : « ça n'a rien à faire dans le panier »). La date vit au checkout, au même moteur J+3 (`#ck-delivery-hint-date`, templates/cart/checkout_onepage.html) : au panier la cliente vérifie CE qu'elle achète et COMBIEN, le quand se lit à l'étape où elle donne son adresse. `!important` : le script du composant remet le `display` inline à vide, une règle simple suffirait, on ne dépend pas de cet ordre. */ :root[data-brand-shell="sourcia"] #cartSlidePanel #cartDeliveryRow { display: none !important; } /* Pied : 7 px au-dessus de « Livraison » (le skin en mettait 20 — c'était le blanc sous le curseur d'upsell), bouton 48 px (règle plus haut), logos de 21 px, note d'avis et réassurance rapprochées. Sous le bouton on garde tout (logos, note, promesse), en plus petit et plus serré. */ :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-panel-summary { padding: 7px 12px 9px !important; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-panel-upsell-slot { padding-bottom: 4px; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-summary-row { padding: 2px 0; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-summary-row.total { padding-top: 5px; margin-top: 3px; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-payment-logos { margin-top: 7px; gap: 5px; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-payment-logo { height: 21px; width: 33px; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-reviews-badge { margin-top: 6px; font-size: 11px; gap: 3px 6px; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-rb-stars i { width: 11px; height: 11px; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-rb-stars i::before { font-size: 8px; } :root[data-brand-shell="sourcia"] #cartSlidePanel .cart-drawer-brand-note { margin-top: 4px; font-size: 11.5px; line-height: 1.3; }