/* ---------------------------------------------------------------------------
   Solène — chrome de la marque virtuelle (bandeau, header, bande de
   réassurance, footer).

   Tokens repris du RELEVÉ MESURÉ de miraglowup.com/products/fondotinta-auto-adattivo
   (temp_assets/replica/miraglow/releve.md, 2026-09-06) : Poppins 400/600,
   titres Helvetica/Arial, wordmark serif, palette #1e1e1e / #666666 / #f6f0e6 /
   #ebe1d6 / #eeeeee, Trustpilot #00b67a, rouge #eb001b, rayons 8 / 12 px,
   breakpoints 750 / 990 px. Préfixe unique `.so-`.
--------------------------------------------------------------------------- */

:root {
    --so-ink: #1e1e1e;
    --so-ink-2: #666666;
    --so-cream: #f6f0e6;
    --so-sand: #ebe1d6;
    --so-sand-2: #e4d6c3;
    --so-border: #eeeeee;
    --so-border-2: #dddddd;
    --so-green: #00b67a;
    --so-red: #eb001b;
    --so-radius: 8px;
    --so-radius-lg: 12px;
    --so-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --so-heading: Helvetica, Arial, sans-serif;
    --so-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* --- Tiroir panier, checkout et suivi : les tokens du skin partagé ----------
   `:root[data-brand-shell="solene"]` pèse (0,1,1) : il gagne sur le `:root`
   d'aurelia-checkout-skin.css quel que soit l'ordre de chargement. */
:root[data-brand-shell="solene"] {
    --aur-primary: #1e1e1e;
    --aur-primary-rgb: 30, 30, 30;
    --aur-primary-hover: #000000;
    --aur-primary-light: #666666;
    --aur-primary-deep: #000000;
    --aur-accent-2: #c9a25a;
    --aur-accent-2-rgb: 201, 162, 90;
    --aur-accent-2-light: #e4d6c3;

    --aur-bg-soft: #f6f0e6;
    --aur-bg-accent: #ebe1d6;
    --aur-border: #dddddd;
    --aur-border-soft: #eeeeee;
    --aur-border-strong: #bcae9a;
    --aur-text: #1e1e1e;
    --aur-text-muted: #666666;

    --aur-panel-bg: #ffffff;
    --aur-panel-bg-rgb: 255, 255, 255;
    --aur-tint-1: #f6f0e6;
    --aur-tint-2: #faf6ef;
    --aur-tint-3: #f6f0e6;
    --aur-tint-4: #fbf8f3;
    --aur-tint-5: #ebe1d6;
    --aur-tint-6: #f6f0e6;

    --aur-urgency-bg-1: #f6f0e6;
    --aur-urgency-bg-2: #ebe1d6;
    --aur-urgency-border: #d9c8ae;
    --aur-urgency-text: #1e1e1e;
    --aur-urgency-accent: #eb001b;

    --aur-font: var(--so-font);
}

/* Les polices de la marque (Poppins + Playfair Display) sont chargees par
   base.html via `brand_shell_font_url` (shop/solene/shell.py), sur TOUTES les
   surfaces de la marque.
   ⚠️ Il y avait ici un `@import` de Playfair. Un `@import` place APRES une regle
   est invalide et silencieusement ignore par le navigateur : ni Playfair ni
   Poppins n'arrivaient jamais au tiroir ni au checkout, qui rendaient donc le
   lockup en Georgia et le corps en Arial (mesure au navigateur le 2026-09-08).
   Ne pas le reintroduire : un <link> se met en parallele, un @import serialise
   une requete de plus sur une page de paiement. */

/* --- Wordmark : « ANCHORED » en surtitre, « Solène » en serif capitales ---- */
.so-wordmark { display: inline-block; line-height: 1; text-align: center; }
.so-wordmark__house {
    display: block;
    font-family: var(--so-font);
    font-size: .5rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--so-ink-2);
    margin-bottom: 2px;
    text-indent: .3em;
}
.so-wordmark__line {
    display: block;
    font-family: var(--so-serif);
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--so-ink);
}
.so-wordmark--footer .so-wordmark__line { font-size: 1.9rem; }

/* --- Bandeau d'annonce ---------------------------------------------------- */
.so-announce {
    background: var(--so-sand);
    color: #1c1e2d;
    text-align: center;
    padding: 8px 14px;
}
.so-announce__text {
    margin: 0;
    font-family: var(--so-font);
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: .01em;
    line-height: 1.3;
    text-transform: uppercase;
}
.so-announce__text sup { font-size: .6em; }

/* L'offre et son horloge sur UNE ligne : le bandeau est colle en haut, chaque
   pixel de hauteur se paie sur toute la page. Le chiffre est en tabulaire pour
   que la ligne ne tressaute pas a chaque seconde. */
.so-announce__text {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap;
}
.so-announce__offer { white-space: nowrap; }
/* Messages tournants (fondateur 2026-09-16, meme mecanique que Sourcia) : le <p>
   garde une hauteur FIXE (une ligne), chaque message est pose en absolu dedans ;
   un seul est visible, les autres attendent a droite. `display: block` et non
   flex sur le message : en flex, l'espace entre <strong> et la suite disparait. */
.so-announce__rot { position: relative; display: block; height: 20px; overflow: hidden; }
.so-announce__msg {
    position: absolute; inset: 0; display: block; line-height: 20px;
    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;
}
.so-announce__msg.is-on { opacity: 1; transform: translateX(0); }
.so-announce__msg.is-out { opacity: 0; transform: translateX(-60%); }
.so-announce__msg.is-in { transition: none; transform: translateX(60%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .so-announce__msg { transition: none; transform: none; }
}
/* ⚠️ `.so-announce__cd` (l'horloge de l'offre dans le bandeau) a ete retiree le
   2026-09-09 (fondateur) : la regle est partie avec le markup.
   `.brand-countdown` ci-dessous RESTE — le tiroir panier et le rappel d'offre du
   checkout s'en servent toujours. */
.brand-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
@media (max-width: 400px) {
    .so-announce__text { font-size: 13px; gap: 6px; }
    .so-announce__rot { height: 18px; }
    .so-announce__msg { line-height: 18px; }
}

/* --- Bandeau + en-tete collants ENSEMBLE ------------------------------------
   Le compte a rebours doit rester lisible jusqu'en bas de page. Deux `sticky`
   freres se recouvriraient et il faudrait mesurer la hauteur du bandeau en JS ;
   un seul parent colle les deux d'un bloc. */
.so-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
}

/* --- Header (dans la barre collante) ---------------------------------------- */
.so-header {
    z-index: 60;
    background: #fff;
    border-bottom: 1px solid var(--so-border);
}
/* HAUTEUR DU HEADER — mesuree, pas devinee (viewport 375, 2026-09-09).
   Avant : header 135 + bandeau 33 + bande de reassurance 60 = 228 px avant le
   premier pixel de contenu, contre 98 px sur Sourcia pour le meme role. La
   marque tenait plus de place que ce qu'elle vend. Le lockup reste le meme,
   il respire simplement moins : 135 -> 86 et la bande 60 -> 42.
   Le desktop (>= 990 px) ne bouge pas : la hauteur n'y coute rien. */
.so-nav {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    min-height: 86px;
    padding: 0 12px;
    width: min(100%, 1200px);
    margin: 0 auto;
}
.so-nav__burger {
    width: 44px; height: 44px;
    display: grid; align-content: center; gap: 7px;
    background: none; border: 0; padding: 6px; cursor: pointer;
}
.so-nav__burger span { display: block; height: 2px; width: 30px; background: var(--so-ink); border-radius: 2px; }
.so-nav__brand { justify-self: center; text-decoration: none; }
.so-nav__cart {
    justify-self: end;
    position: relative;
    color: var(--so-ink);
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; text-decoration: none;
}
.so-nav__cart-count {
    position: absolute; top: 4px; right: 2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--so-ink); color: #fff;
    font: 600 10px/17px var(--so-font); text-align: center;
}
.so-nav__cart-count:empty, .so-nav__cart-count[data-cart-count="0"] { display: none; }
.so-nav__menu {
    list-style: none; margin: 0; padding: 8px 0 14px;
    grid-column: 1 / -1;
    display: grid; gap: 4px;
}
.so-nav__menu:not(.is-open) { display: none; }
.so-nav__menu a {
    display: block; padding: 10px 6px;
    color: var(--so-ink); text-decoration: none;
    font-family: var(--so-font); font-size: 15px; font-weight: 400;
    border-bottom: 1px solid var(--so-border);
}
.so-nav__menu a[aria-current="page"] { font-weight: 600; }

@media (min-width: 990px) {
    .so-nav { grid-template-columns: 1fr auto 1fr; min-height: 96px; }
    .so-nav__burger { display: none; }
    .so-nav__menu, .so-nav__menu:not(.is-open) {
        display: flex; gap: 26px; padding: 0; grid-column: auto; justify-self: start;
        order: -1;
    }
    .so-nav__menu a { border: 0; padding: 4px 0; font-size: 14px; }
    .so-wordmark__line { font-size: 2.2rem; }
}

/* --- Bande de réassurance tournante ------------------------------------------- */
.so-trust {
    background: #fff;
    border-bottom: 1px solid var(--so-border);
    height: 42px;
    position: relative;
    overflow: hidden;
}
.so-trust__list { list-style: none; margin: 0; padding: 0; height: 100%; position: relative; }
.so-trust__list li {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--so-font); font-size: 15.5px; letter-spacing: .04em; color: var(--so-ink);
    opacity: 0; transition: opacity .5s ease; padding: 0 12px; text-align: center;
}
.so-trust__list li.is-on { opacity: 1; }
/* Mobile (fondateur 2026-09-26) : bande plus discrete au-dessus de la galerie, comme sur Miraglow. */
@media (max-width: 749.98px) {
    .so-trust { height: 34px; }
    .so-trust__list li { font-size: 13px; letter-spacing: .03em; }
}

/* --- Footer ------------------------------------------------------------------- */
.so-footer {
    background: var(--so-cream);
    color: var(--so-ink);
    font-family: var(--so-font);
    padding: 44px 0 30px;
}
.so-footer__inner { width: min(100% - 32px, 1200px); margin: 0 auto; }
.so-footer__brand { display: block; text-align: center; text-decoration: none; margin-bottom: 30px; }
.so-footer__h {
    font-family: var(--so-heading);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 12px;
    color: var(--so-ink);
}
.so-footer__contact { display: flex; align-items: center; gap: 8px; margin: 0 0 34px; font-size: 14px; }
.so-footer__contact a { color: var(--so-ink); text-decoration: none; }
.so-footer__news { margin: 0 0 34px; }
.so-footer__news-field {
    display: flex; align-items: center;
    background: #fff; border: 1px solid var(--so-border-2); border-radius: var(--so-radius);
    padding: 0 6px 0 16px; height: 56px;
}
.so-footer__news-field input {
    flex: 1; min-width: 0; border: 0; background: none; outline: none;
    font-family: var(--so-font); font-size: 16px; color: var(--so-ink);
}
.so-footer__news-field button { background: none; border: 0; color: var(--so-ink); width: 44px; height: 44px; cursor: pointer; }
.so-footer__news-ok { display: block; margin-top: 8px; font-size: 13px; color: var(--so-ink-2); }
.so-footer__news-ok[hidden] { display: none; }
.so-footer .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.so-footer__acc { border: 0; margin: 0 0 24px; }
.so-footer__acc summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--so-heading); font-size: 19px; padding: 6px 0;
}
.so-footer__acc summary::-webkit-details-marker { display: none; }
.so-footer__acc[open] summary span { transform: rotate(45deg); display: inline-block; }
.so-footer__acc-body p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--so-ink-2); }
.so-footer__rule { border: 0; border-top: 1px solid var(--so-ink); margin: 0 0 28px; }
.so-footer__pay { margin: 0 0 26px; }
.so-footer__pay .so-paylist { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* Logos officiels : chaque logo EST sa carte 38x24, pas de cadre autour (2026-09-26). */
.so-footer__pay .so-paylist li { display: inline-flex; }
.so-footer__pay .so-paylist svg { display: block; width: 38px; height: 24px; }

/* --- Header du checkout : le MEME lockup que le site (ANCHORED / SOLÈNE) ------------- */
:root[data-brand-shell="solene"] .ck-header__brand-text { display: none; }
:root[data-brand-shell="solene"] .ck-header__lockup { display: inline-block; line-height: 1; text-align: center; }
:root[data-brand-shell="solene"] .ck-header__lockup .so-wordmark__house { font-size: .46rem; margin-bottom: 3px; }
:root[data-brand-shell="solene"] .ck-header__lockup .so-wordmark__line { font-size: 1.45rem; }
.so-pay {
    width: 44px; height: 28px; border-radius: 4px; border: 1px solid var(--so-border-2);
    background: #fff; display: inline-flex; align-items: center; justify-content: center;
    font: 700 11px/1 Arial, sans-serif; color: #111;
}
.so-pay--apple { color: #000; }
.so-pay--gpay { color: #3c4043; }
.so-pay--mc { background: #1e1e1e; border-color: #1e1e1e; gap: 0; }
.so-pay--mc i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.so-pay--mc i:first-child { background: #eb001b; margin-right: -5px; }
.so-pay--mc i:last-child { background: #f79e1b; }
.so-pay--pp { color: #142fbd; font-style: italic; }
.so-pay--cb { background: #2e7d5b; color: #fff; border-color: #2e7d5b; }
.so-pay--visa { background: #1434cb; color: #fff; border-color: #1434cb; font-style: italic; }
.so-footer__copy { margin: 0 0 6px; text-align: center; font-size: 10px; color: var(--so-ink); }
.so-footer__links {
    list-style: none; margin: 0 0 16px; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px;
}
.so-footer__links a { color: var(--so-ink); font-size: 10px; text-decoration: none; }
.so-footer__links a:hover { text-decoration: underline; }
.so-footer__legal { margin: 0; text-align: center; font-size: 10px; color: var(--so-ink-2); line-height: 1.6; }

@media (min-width: 750px) {
    .so-announce { padding: 14px 16px; }
    .so-footer__inner { max-width: 620px; }
}

/* Le tiroir panier partagé : la marque n'hérite jamais des visuels de la
   voisine ; sans image de perk on retombe sur l'icône. Rien à surcharger ici. */


/* ═══════════════════════════════════════════════════════════════════════════
   TIROIR PANIER — geometrie relevee sur le tiroir de la source (2026-09-07,
   viewport 390 px, `.kaching-cart__*`). Le composant est PARTAGE entre toutes
   les marques : on ne le duplique pas, on lui donne d'autres valeurs, et tout
   est scope sous `[data-brand-shell="solene"]` — les autres marques ne bougent
   pas d'un pixel. Specificite (0,1,1) : gagne sur le `:root` du skin partage.
   ⚠️ `static/css/aurelia-checkout-skin.css` pose `!important` sur le padding de
   l'en-tete, des articles et du recap, et sur le rayon/padding/fond du bouton.
   La specificite ne suffit donc PAS : une marque doit repondre au meme niveau,
   et seulement sur ces proprietes-la.
   ═══════════════════════════════════════════════════════════════════════════ */

/* En-tete : 44 px (6 + 32 + 6), titre 16/20 w500, croix nue de 32 px (source : pas de
   pastille). La source mesurait 47 px avec un titre de 18 px ; resserre le 2026-09-16
   (fondateur : « plus fin, plus petit, plus serre », mesure a 55 px chez nous) — chaque
   pixel rendu ici va aux articles, ce que la cliente vient verifier. */
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-header { padding: 6px 8px 6px 12px !important; }
:root[data-brand-shell="solene"] #cartSlidePanel #cart-panel-title {
    font-size: 16px; line-height: 20px; font-weight: 500; color: #000;
    font-family: var(--so-font); gap: 5px;
}
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-count { font-size: 14px; }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-count-label { font-size: 12px; }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-close {
    width: 32px; height: 32px; background: transparent; border: 0; border-radius: 0; color: #000;
}
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-close i { font-size: 18px; }

/* « Chez vous des le … » quitte le tiroir (fondateur 2026-09-16 : « ca n'a rien a faire
   dans le panier »). La date vit au checkout, au meme moteur J+3 (`#ck-delivery-hint-date`,
   templates/cart/checkout_onepage.html). `!important` : le script du composant remet le
   `display` inline a vide ; une regle simple suffirait, on ne depend pas de cet ordre. */
:root[data-brand-shell="solene"] #cartSlidePanel #cartDeliveryRow { display: none !important; }

/* Reservation de panier (« Derniers flacons en stock ! ... 14:49 ») : RETIREE de
   cette marque (fondateur 2026-09-07). La seule urgence affichee est celle de
   l'offre du jour, dont l'echeance est vraie et verifiable — empiler un second
   decompte, de nature differente, brouillait le message.

   ⚠️ `!important` obligatoire : le script du tiroir ecrit `style.display = 'flex'`
   en INLINE sur cet element, et un style d'auteur sans `!important` perd contre
   un style en ligne. Le minuteur continue de tourner sans rien vider du panier,
   il n'est simplement plus affiche ici. */
:root[data-brand-shell="solene"] #cartSlidePanel #cartUrgencyHeader { display: none !important; }

/* Lignes d'article : 12 px de gouttiere, vignette 62 px.
   La vignette etait a 80 px en `object-fit: cover` (relevee sur la source, qui n'a QUE
   des packshots plein cadre) : chez nous les cadeaux arrivent avec leur propre fond, et
   `cover` les recadrait bord a bord — l'eponge devenait une masse beige de 80 px qui
   ecrasait sa ligne (fondateur 2026-09-22 : « les images sont beaucoup trop grosses et
   mal imbriquees »). Desormais : 62 px, `contain` dans une tuile creme cerclee d'un
   filet — chaque produit est POSE dans son cadre au lieu d'etre recadre dedans, et les
   lignes respirent. */
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-items { padding: 0 !important; }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-item { padding: 13px 12px 12px; gap: 10px; }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-item-image {
    width: 62px !important; height: 62px !important; flex: 0 0 62px !important;
    background: var(--so-cart-tile); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--so-cart-line);
}
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-item img {
    width: 100% !important; height: 100% !important; object-fit: contain;
    padding: 4px; box-sizing: border-box;
}

/* Pied : filet 1 px, bouton 47 px arrondi a 5.44 px, libelle 14/17 w600 SANS capitales.
   Resserre le 2026-09-16 (fondateur : « le footer est trop charge ») — 8 px au-dessus de
   « Livraison » au lieu de 15, logos de 21 px au lieu de 27 (la source en met ~20), note
   d'avis et ligne « sans risque » rapprochees. On garde TOUT ce qui etait sous le bouton
   (logos, Trustpilot, promesse 60 jours), en plus petit et plus serre ; le bouton lui-meme
   garde ses 47 px de source. */
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-summary { border-top: 1px solid #e3e3e3 !important; padding: 8px 12px 10px !important; }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-summary-row { padding: 2px 0; }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-summary-row.total { padding-top: 5px; margin-top: 3px; }
/* LE BOUTON SOLÈNE (fondateur 2026-09-16 : « designé par rapport à la marque, comme
   Sourcia ») — le MÊME modèle que le bouton d'achat de la page (`.so-btn`, template
   solene_fond_de_teint.html) : Playfair Display 500 en capitales espacées (la typo du
   wordmark « SOLÈNE »), le noir de l'encre, un liseré champagne intérieur d'1 px (l'or
   du capuchon, #d0b090 mesuré sur le packshot), rayon 8 px = le token de la marque.
   Avant : le rectangle 5,44 px Poppins de la source, sans rien de Solène.
   ⚠️ Le composant partagé pose `#cartSlidePanel a.cart-checkout-btn { border, box-shadow,
   background !important }` à (1,1,2) : on répond à (1,2,1) avec l'ID du bouton, en
   !important sur ces seules propriétés. Les <span> du libellé et du prix ont leur propre
   `font-size` dans le composant (14,5 px à ≤ 480 px) : on les rhabille aussi. */
:root[data-brand-shell="solene"] #cartSlidePanel #cartCheckoutBtn {
    min-height: 48px; border-radius: 8px !important; padding: 13px 14px !important;
    font-family: var(--so-serif) !important; font-size: 14px; line-height: 18px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .12em; gap: 8px; margin-top: 7px;
    background: var(--so-ink) !important; border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(208, 176, 144, .62), 0 8px 18px -10px rgba(30, 30, 30, .55) !important;
}
:root[data-brand-shell="solene"] #cartSlidePanel #cartCheckoutBtn:hover {
    background: #000 !important;
    box-shadow: inset 0 0 0 1px rgba(208, 176, 144, .85), 0 10px 20px -10px rgba(30, 30, 30, .6) !important;
}
:root[data-brand-shell="solene"] #cartSlidePanel .cart-checkout-btn-label,
:root[data-brand-shell="solene"] #cartSlidePanel .cart-checkout-btn-price {
    font-family: var(--so-serif); font-size: 14px; font-weight: 500; letter-spacing: .12em;
}
/* Le point médian entre le libellé et le prix : sans espacement de lettres, sinon il flotte. */
:root[data-brand-shell="solene"] #cartSlidePanel .cart-checkout-btn-price::before { letter-spacing: 0; margin-right: 6px; }
:root[data-brand-shell="solene"] #cartSlidePanel #cartPaymentLogos { margin-top: 7px; gap: 5px; }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-payment-logo { width: 33px; height: 21px; }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-reviews-badge { margin-top: 6px; font-size: 11px; gap: 3px 6px; }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-rb-stars i { width: 11px; height: 11px; }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-rb-stars i::before { font-size: 8px; }

/* Ligne « sans risque » sous les moyens de paiement (source : 13/16 w600 ; ici 12/15,
   collee a la note d'avis). Scopee sur la marque comme tout le bloc — la regle etait nue. */
:root[data-brand-shell="solene"] #cartSlidePanel .cart-drawer-brand-note {
    margin: 4px 0 0; text-align: center;
    font-size: 12px; line-height: 15px; font-weight: 600; color: #000;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT — habillage de la marque.

   ⚠️ Ce qu'on ne fait PAS : cloner le checkout de la source. C'est le checkout
   HOSTE de Shopify, verrouille et non reproductible ; et AGENTS.md impose de
   garder UNE architecture de paiement stable. On aligne donc les CODES de la
   marque (bouton plat a 5.44 px comme le tiroir et la page, capitales retirees,
   cartes moins arrondies, en-tete resserre) sans toucher a un seul comportement.
   Aucun changement de formulaire, de validation ni de flux de paiement.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-brand-shell="solene"] .ck-header { padding: 12px 16px !important; }
:root[data-brand-shell="solene"] .ck-header__lockup { color: var(--so-ink); }

/* Bouton « Je commande » : LE BOUTON SOLÈNE, comme sur la page et dans le tiroir
   (fondateur 2026-09-16) — Playfair Display 500 en capitales espacées, noir de l'encre,
   liseré champagne intérieur, rayon 8 px. Le checkout partagé pose
   `#submit-payment-btn.ck-submit-btn { background, font-size, padding !important }` à
   (1,1,0) et le skin `.ck-form-col button[type=submit]` à (0,2,1) : (1,2,0) gagne. */
:root[data-brand-shell="solene"] #submit-payment-btn.ck-submit-btn {
    border-radius: 8px !important;
    padding: 17px 20px !important;
    font-family: var(--so-serif) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    background: var(--so-ink) !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(208, 176, 144, .62), 0 10px 22px -10px rgba(30, 30, 30, .55) !important;
}
:root[data-brand-shell="solene"] #submit-payment-btn.ck-submit-btn:hover {
    background: #000 !important;
    box-shadow: inset 0 0 0 1px rgba(208, 176, 144, .85), 0 12px 24px -10px rgba(30, 30, 30, .6) !important;
}
:root[data-brand-shell="solene"] #submit-payment-btn.ck-submit-btn:disabled {
    background: #9a9a9a !important; box-shadow: none !important;
}

/* Cartes et champs : le rayon de la marque (6 px), pas le 14 px du skin partage. */
:root[data-brand-shell="solene"] .ck-bottom-reassurance,
:root[data-brand-shell="solene"] .ck-guarantee,
:root[data-brand-shell="solene"] .ck-summary-card { border-radius: 6px !important; }

/* Titres de section : Playfair, comme les titres de la page produit. */
:root[data-brand-shell="solene"] .ck-section-title,
:root[data-brand-shell="solene"] .ck-step-title,
:root[data-brand-shell="solene"] .ck-bottom-reassurance__title,
:root[data-brand-shell="solene"] .ck-brandproof__title {
    font-family: var(--so-serif);
    /* La fonte n'est chargee qu'en 500 : demander 600 declencherait un gras
       synthetique, plus epais que les titres de la page produit. */
    font-weight: 500 !important;
}
/* Le titre de reassurance etait en gras capitalise facon skin partage : sur la
   page de la marque, un titre de section est un serif fin, centre, sans gras. */
:root[data-brand-shell="solene"] .ck-bottom-reassurance__title {
    font-size: 19px;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
}
/* `.ck-highlight` met un serif italique (Instrument Serif) dans les titres du
   skin partage. Chez Solene le titre EST deja serif : l'italique detonne. */
:root[data-brand-shell="solene"] .ck-bottom-reassurance__title .ck-highlight {
    font-family: inherit; font-style: normal;
}

/* --- Surfaces : la creme et le sable de la page produit ---------------------
   Les cartes du checkout etaient transparentes ou dans le beige du skin
   partage. La page produit alterne blanc / creme (#f6f0e6) / sable (#ebe1d6) :
   on reprend exactement ces trois fonds, avec le filet sable de ses sections. */
:root[data-brand-shell="solene"] .ck-bottom-reassurance {
    background: var(--so-cream) !important;
    border: 1px solid #e3d6c2 !important;
}
:root[data-brand-shell="solene"] .ck-guarantee {
    background: var(--so-sand) !important;
    border: 1px solid #dbcbb4 !important;
}
:root[data-brand-shell="solene"] .ck-bottom-reassurance__icon {
    background: #fff;
    border: 1px solid #e3d6c2;
    color: var(--so-ink);
}

/* --- Etoiles Trustpilot : le vert de la marque, pas le noir du skin --------- */
:root[data-brand-shell="solene"] .ck-brandstars i { background: var(--so-green); }
:root[data-brand-shell="solene"] .ck-brandstars--half i:last-child {
    background: linear-gradient(90deg, var(--so-green) 50%, #dcdce6 50%);
}

/* --- Preuve sociale : les codes de la section « avis » de la page ----------- */
:root[data-brand-shell="solene"] .ck-brandproof { font-family: var(--so-font); }
:root[data-brand-shell="solene"] .ck-brandproof__card {
    border-color: #e6ded2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}
:root[data-brand-shell="solene"] .ck-brandproof__card h3 { color: var(--so-ink); }
:root[data-brand-shell="solene"] .ck-brandproof__card p { color: var(--so-ink); }
:root[data-brand-shell="solene"] .ck-brandproof__card small { color: var(--so-ink-2); opacity: 1; }

/* Rangee de moyens de paiement sous le bouton : rien a surcharger ici. La mise
   en page vit dans le <style> du checkout (`.ck-brand-paylogos ul/li/svg`),
   volontairement AGNOSTIQUE de la marque pour que toute marque qui declare
   `payment_icons_template` soit correcte du premier coup. Y ajouter une regle
   `.so-paylist` ferait deux definitions concurrentes de la meme rangee. */


/* --- Rappel de l'offre du jour (tiroir + checkout) --------------------------
   Meme bande sable, meme formulation, meme echeance que le bandeau du site :
   la cliente lit la meme promesse a chaque etape. */
.brand-offer-strip {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    flex-wrap: wrap; margin: 0; padding: 9px 12px;
    background: #e7ddd0; color: #1c1e2d;
    font-size: 12.5px; line-height: 16px; font-weight: 600; text-align: center;
}
/* Dans le tiroir : une ligne de 28 px (6 px de padding), pas 34 — l'en-tete et le bandeau
   sont deux bandes fixes au-dessus des articles, chaque pixel s'y paie deux fois. */
:root[data-brand-shell="solene"] #cartSlidePanel .brand-offer-strip { padding: 6px 12px; }
/* Funnel B (fondateur 2026-09-24) : le rappel passe au ROUGE de la marque — l'offre se
   termine ce soir (texte fixe, jamais d'horloge au panier ni au paiement). */
.brand-offer-strip--urgent { background: #b3261e; color: #fff; font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════════════════
   UPSELLS DU FUNNEL « PALIERS » (fondateur 2026-09-22)
   Trois composants partagés, codés en orange / brun-or Lumin'Or en dur, recolorés
   ici sous `data-brand-shell="solene"` (même recette que Sourcia, shell.css §upsells) :
   1. le curseur « Protection colis » du checkout (components/checkout_protect_toggle.html)
   2. le popup après l'ajout au panier (components/lumin_v5_upsell_modal.html)
   3. le modal de la page de succès (static/css/components/success-upsell-modal.css)
   Palette : encre #1e1e1e, champagne #d0b090 (l'or du capuchon), crème #f6f0e6 ;
   Playfair Display sur les titres et les boutons, Poppins pour le reste.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-brand-shell="solene"] { --so-champagne: #d0b090; --so-champagne-deep: #b8935a; }

/* --- 1. Protection colis (checkout) ------------------------------------------ */
:root[data-brand-shell="solene"] .ck-protect {
    border: 1px solid var(--so-border-2, #dddddd); border-radius: 8px; background: #fff;
    box-shadow: inset 0 0 0 1px rgba(208, 176, 144, .35);
    font-family: var(--so-font);
}
:root[data-brand-shell="solene"] .ck-protect:hover { border-color: var(--so-champagne); }
:root[data-brand-shell="solene"] .ck-protect:has(.ck-protect__check:checked) {
    border-color: var(--so-champagne-deep); background: var(--so-cream, #f6f0e6); box-shadow: none;
}
:root[data-brand-shell="solene"] .ck-protect__icon { color: var(--so-champagne-deep); }
:root[data-brand-shell="solene"] .ck-protect__name {
    font-family: var(--so-serif); font-weight: 600; font-size: .98rem; letter-spacing: .01em; color: var(--so-ink);
}
:root[data-brand-shell="solene"] .ck-protect__price { color: var(--so-ink); font-weight: 700; }
:root[data-brand-shell="solene"] .ck-protect__text { color: var(--so-ink-2); }
:root[data-brand-shell="solene"] .ck-protect__track { background: var(--so-sand-2, #e4d6c3); }
:root[data-brand-shell="solene"] .ck-protect__check:checked + .ck-protect__track { background: var(--so-ink); }
:root[data-brand-shell="solene"] .ck-protect__check:checked + .ck-protect__track .ck-protect__knob { background: var(--so-champagne); }

/* --- 2. Popup après l'ajout au panier ----------------------------------------- */
:root[data-brand-shell="solene"] .lumin-v5-upsell-modal { font-family: var(--so-font); border-radius: 10px; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-badge { background: var(--so-ink); color: #fff; border-radius: 4px; padding: 4px 10px; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-title { font-family: var(--so-serif); font-weight: 600; font-size: 20px; color: var(--so-ink); letter-spacing: .01em; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-name { color: var(--so-ink); font-weight: 600; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-price { color: var(--so-ink); font-family: var(--so-serif); font-weight: 600; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-price-old { color: #9a9a9a; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-desc { color: var(--so-ink-2); }
:root[data-brand-shell="solene"] .lumin-v5-upsell-proof { color: var(--so-champagne-deep); }
:root[data-brand-shell="solene"] .lumin-v5-upsell-carousel-wrap { background: #fff; height: 300px; }
:root[data-brand-shell="solene"] .lumin-v5-carousel-dot.is-active { background: var(--so-champagne); }
:root[data-brand-shell="solene"] .lumin-v5-upsell-btn--accept {
    background: var(--so-ink); color: #fff; box-shadow: inset 0 0 0 1px rgba(208, 176, 144, .62); border-radius: 8px;
    font-family: var(--so-serif); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 14px;
}
:root[data-brand-shell="solene"] .lumin-v5-upsell-btn--accept:hover { background: #000; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-btn--decline { border-radius: 8px; border-color: var(--so-border-2); color: var(--so-ink-2); font-family: var(--so-font); font-weight: 500; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-trust { display: none !important; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-desc-toggle { color: var(--so-champagne-deep); }
/* Lisibilité 60 ans et plus (29/09) : texte >= 15 px, boutons >= 48 px, copy du candidat
   (cta_text / decline_text) sans capitales forcées, puces de proof_text en vraie liste. */
:root[data-brand-shell="solene"] .lumin-v5-upsell-name { font-size: 16px; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-desc { font-size: 15px; line-height: 1.45; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-desc-toggle { font-size: 15px; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-proof.is-list { display: block; margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--so-ink); }
:root[data-brand-shell="solene"] .lumin-v5-upsell-proof-list { list-style: none; margin: 0; padding: 0; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-proof-list li { position: relative; padding-left: 22px; line-height: 1.4; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-proof-list li + li { margin-top: 6px; }
:root[data-brand-shell="solene"] .lumin-v5-upsell-proof-list li::before {
    content: "\2713"; position: absolute; left: 0; top: 0; color: var(--so-champagne-deep); font-weight: 700;
}
:root[data-brand-shell="solene"] .lumin-v5-upsell-btn--accept {
    font-size: 16px; min-height: 52px; text-transform: none; letter-spacing: .01em; line-height: 1.25; padding: 12px 14px;
}
:root[data-brand-shell="solene"] .lumin-v5-upsell-btn--decline {
    font-size: 15px; min-height: 48px; color: var(--so-ink); text-decoration: underline; text-underline-offset: 3px; line-height: 1.3; padding: 10px 12px;
}

/* --- 3. Modal de la page de succès (post-achat) ------------------------------- */
:root[data-brand-shell="solene"] .success-upsell-modal { background: #fff; border-color: var(--so-border-2); box-shadow: 0 20px 50px rgba(30, 30, 30, .18); font-family: var(--so-font); border-radius: 10px; }
:root[data-brand-shell="solene"] .success-upsell-badge { background: var(--so-cream); border-color: var(--so-sand-2); color: var(--so-ink); }
:root[data-brand-shell="solene"] .success-upsell-name { color: var(--so-champagne-deep); }
:root[data-brand-shell="solene"] .success-upsell-title { font-family: var(--so-serif); font-weight: 600; color: var(--so-ink); font-size: 19px; letter-spacing: .01em; }
:root[data-brand-shell="solene"] .success-upsell-subtitle { color: var(--so-ink-2); }
:root[data-brand-shell="solene"] .success-upsell-proof { color: var(--so-champagne-deep); }
:root[data-brand-shell="solene"] .success-upsell-price-old { color: #9a9a9a; }
:root[data-brand-shell="solene"] .success-upsell-price-new { color: var(--so-ink); font-family: var(--so-serif); font-weight: 600; }
:root[data-brand-shell="solene"] .success-upsell-save { background: var(--so-cream); color: var(--so-ink); }
:root[data-brand-shell="solene"] .success-upsell-cta-copy { color: var(--so-ink-2); }
:root[data-brand-shell="solene"] .success-upsell-button {
    background: var(--so-ink); color: #fff; box-shadow: inset 0 0 0 1px rgba(208, 176, 144, .62); border-radius: 8px;
    font-family: var(--so-serif); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
:root[data-brand-shell="solene"] .success-upsell-button:hover { background: #000; }
:root[data-brand-shell="solene"] .success-upsell-decline { color: var(--so-ink-2); }

/* ══════════════════════════════════════════════════════
   LA PALETTE DU PANIER ET DU RECAP (fondateur 2026-09-22 : « le vert ne va pas du
   tout, refais bien le panier a ce niveau-la en mode Solene — un background plutot
   noir, avec parfois quelque chose en rouge pour appuyer le cote offre, en restant
   simple et efficace. Evite le vert tres punch, il n'est vraiment pas beau »).

   Le composant panier est partage : son vert pomme (#22c55e / #16a34a / #dcfce7) dit
   « gratuit » chez Lumin'Or. Solene n'a que trois couleurs — l'encre, la creme et le
   bordeaux du titre d'offre — et le vert n'en fait pas partie. On ne touche donc pas
   au composant, on lui donne la palette de la marque, scope sous
   `[data-brand-shell="solene"]`.

   LA REGLE, pour que le rouge garde son poids : l'ENCRE porte ce qui NOMME (le badge
   de l'offre, « Livraison offerte », l'upsell coche), le BORDEAUX ne porte que ce qui
   CHIFFRE l'avantage (« Economie 40 % », « OFFERT », le code promo), et le GRIS porte
   ce qui n'est ni l'un ni l'autre (« Retirer », « Offre a duree limitee »). Trois
   niveaux, jamais deux rouges qui se disputent la meme ligne.
   ══════════════════════════════════════════════════════ */
:root[data-brand-shell="solene"] {
    --so-cart-ink: #1e1e1e;
    --so-cart-red: #b3261e;                      /* le meme bordeaux que le titre d'offre de la page */
    --so-cart-red-soft: rgba(179, 38, 30, .08);
    --so-cart-tile: #f5efe9;                     /* la creme des cartes d'offre */
    --so-cart-line: rgba(30, 30, 30, .12);
    --so-cart-muted: #6b7280;
}

/* Ce qui NOMME l'offre : l'encre. */
:root[data-brand-shell="solene"] #cartSlidePanel .cart-item-quantity-bundle-badge,
:root[data-brand-shell="solene"] #cartSlidePanel .cart-item-bundle-badge {
    background: var(--so-cart-ink); color: #fff; box-shadow: none; border-radius: 6px; letter-spacing: .01em;
}
:root[data-brand-shell="solene"] #cartSlidePanel .gift-item-img-badge { background: var(--so-cart-ink); }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-summary-row.shipping .shipping-free,
:root[data-brand-shell="solene"] #cartSlidePanel .cart-item-shipping-note--free,
:root[data-brand-shell="solene"] #cartSlidePanel .cart-summary-row.discount { color: var(--so-cart-ink); }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-upsell-toggle.is-added {
    border-color: var(--so-cart-ink); background: var(--so-cart-tile);
}
:root[data-brand-shell="solene"] #cartSlidePanel .cart-upsell-toggle.is-added .cart-upsell-toggle__track { background: var(--so-cart-ink); }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-upsell-toggle__added,
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-upsell-card.is-added .cart-panel-upsell-status { color: var(--so-cart-ink); }

/* Ce qui CHIFFRE l'avantage : le bordeaux, et lui seul. */
:root[data-brand-shell="solene"] #cartSlidePanel .cart-item-quantity-bundle-savings,
:root[data-brand-shell="solene"] #cartSlidePanel .cart-bundle-savings {
    background: var(--so-cart-red-soft); color: var(--so-cart-red);
}
:root[data-brand-shell="solene"] #cartSlidePanel .gift-item-price-free { color: var(--so-cart-red); }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-discount-code { background: var(--so-cart-red); color: #fff; }

/* Une puce cadeau creme cerclee, pas un autocollant vert. */
:root[data-brand-shell="solene"] #cartSlidePanel .gift-item-badge {
    background: var(--so-cart-tile); color: var(--so-cart-ink);
    box-shadow: inset 0 0 0 1px var(--so-cart-line);
}

/* Le liseré et le voile de fond des lignes d'offre et de cadeau : l'encre, en trait
   fin. C'est ce qui restait de vert apres le premier passage — une barre verte de
   2-3 px sur le bord gauche de chaque ligne, vue au rendu. */
:root[data-brand-shell="solene"] #cartSlidePanel .cart-item--quantity-bundle {
    border-left: 2px solid var(--so-cart-ink);
    background: linear-gradient(to right, rgba(30, 30, 30, .045), transparent);
}
:root[data-brand-shell="solene"] #cartSlidePanel .cart-panel-item--bundle-gift {
    border-left: 3px solid var(--so-cart-ink);
    background: linear-gradient(to right, rgba(30, 30, 30, .04) 0%, transparent 60%);
}
/* Le prix paye de la ligne d'offre : l'encre, comme tous les autres prix du tiroir.
   En vert il devenait l'element le plus criard de l'ecran, au-dessus du total. */
:root[data-brand-shell="solene"] #cartSlidePanel .cart-item--quantity-bundle .cart-item-price { color: var(--so-cart-ink); }

/* L'add-on du bas (« Pinceau applicateur… ») arrivait en AMBRE — le `--aur-primary`
   de Lumin'Or : pas du vert, mais pas Solene non plus. Meme traitement : cadre creme
   a filet plein (le pointille sablon faisait brouillon), nom a l'encre, et le prix en
   bordeaux, puisque c'est lui qui chiffre. */
:root[data-brand-shell="solene"] #cartSlidePanel .cart-upsell-toggle {
    border: 1px solid var(--so-cart-line); background: var(--so-cart-tile);
}
:root[data-brand-shell="solene"] #cartSlidePanel .cart-upsell-toggle__price { color: var(--so-cart-red); }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-upsell-toggle__name { color: var(--so-cart-ink); }
:root[data-brand-shell="solene"] #cartSlidePanel .cart-upsell-toggle__desc { color: var(--so-cart-muted); font-weight: 500; }

/* Le reste : gris. « Retirer » n'est pas un bouton d'achat, il ne doit pas briller. */
:root[data-brand-shell="solene"] #cartSlidePanel .gift-item-limited,
:root[data-brand-shell="solene"] #cartSlidePanel .cart-item-shipping-note--paid,
:root[data-brand-shell="solene"] #cartSlidePanel .cart-item-remove--quantity-bundle,
:root[data-brand-shell="solene"] #cartSlidePanel .cart-item-remove--bundle { color: var(--so-cart-muted); }

/* ── LE MEME TRAITEMENT AU RECAP DU CHECKOUT ────────────────────────────────
   Le recap (`templates/components/checkout_order_summary.html` +
   `static/css/components/checkout-order-summary.css`) est le MEME composant
   partage, avec le meme vert : la cliente passait d'un tiroir Solene a un recap
   Lumin'Or. Meme regle des trois niveaux — encre / bordeaux / gris.
   `!important` la ou la valeur est en style INLINE dans le composant (un
   `!important` d'auteur bat un style en ligne ordinaire) ; les deux pastilles
   d'offre et les lignes « Cadeau inclus » ont recu une CLASSE pour etre
   atteignables, sans qu'aucune de leurs valeurs ne change pour les autres marques. */

/* Les vignettes : POSEES dans une tuile creme, plus recadrees bord a bord. */
:root[data-brand-shell="solene"] .checkout-order-summary__item-image {
    object-fit: contain; background: var(--so-cart-tile); padding: 4px;
    border-radius: 8px; box-shadow: inset 0 0 0 1px var(--so-cart-line);
}

/* Ce qui NOMME : l'encre. */
:root[data-brand-shell="solene"] .ck-sum-offer-badge {
    background: var(--so-cart-ink) !important; border-radius: 6px !important;
}
:root[data-brand-shell="solene"] .ck-gift-item__img-badge { background: var(--so-cart-ink) !important; }
:root[data-brand-shell="solene"] .checkout-order-summary__shipping-free,
:root[data-brand-shell="solene"] .checkout-order-summary__delivery-date,
:root[data-brand-shell="solene"] .checkout-order-summary__item-current-price,
:root[data-brand-shell="solene"] .ck-sum-gift-line { color: var(--so-cart-ink) !important; }
:root[data-brand-shell="solene"] .checkout-order-summary__total-value { color: var(--so-cart-ink) !important; }

/* Ce qui CHIFFRE l'avantage : le bordeaux. */
:root[data-brand-shell="solene"] .checkout-order-summary__item-discount {
    background-color: var(--so-cart-red-soft) !important; color: var(--so-cart-red) !important;
}
:root[data-brand-shell="solene"] .checkout-order-summary__subtotal-discount-badge,
:root[data-brand-shell="solene"] .checkout-order-summary__subtotal-discount-value { color: var(--so-cart-red) !important; }
:root[data-brand-shell="solene"] .checkout-order-summary__subtotal-discount {
    background: var(--so-cart-red-soft) !important; border-color: rgba(179, 38, 30, .22) !important;
    color: var(--so-cart-red) !important;
}

/* `--color-success` sert encore quelques valeurs du recap : on le repeint pour
   cette marque seulement, plutot que de courir apres chacune. */
:root[data-brand-shell="solene"] { --color-success: #1e1e1e; --aur-success: #1e1e1e; }

/* Les trois derniers verts du checkout, releves au scanner (tout element visible
   dont la couleur, le fond, le degrade ou le bord est franchement vert) :
   - le point qui clignote sous la preuve sociale (« X vient de commander ») : il
     passe au bordeaux — un point rouge qui pulse dit « en direct » aussi bien, et
     c'est la seule couleur chaude que la marque s'autorise ;
   - la mini-ligne de livraison (icone + pastille « Livraison offerte ») : a l'encre.
   Restent volontairement verts : les carres d'etoiles Trustpilot (`.ck-brandstars`),
   qui sont la marque d'un tiers — les repeindre serait faux. */
:root[data-brand-shell="solene"] .ck-fomo-dot__ring,
:root[data-brand-shell="solene"] .ck-fomo-dot__core { background: var(--so-cart-red) !important; }
:root[data-brand-shell="solene"] .ck-shipmini__ico { color: var(--so-cart-ink) !important; }
:root[data-brand-shell="solene"] .ck-live-proof__line3 { color: var(--so-cart-muted) !important; }
:root[data-brand-shell="solene"] .ck-live-proof__line3::before { background: var(--so-cart-red) !important; }
:root[data-brand-shell="solene"] .ck-shipmini__free {
    color: var(--so-cart-ink) !important; border-color: var(--so-cart-line) !important;
    background: var(--so-cart-tile) !important;
}