/* Ochaka — mode épurée, d'après le gabarit « Ochaka ».
   Blanc, Afacad, boutons pilule noirs, étiquettes pilule blanches sur les
   tuiles de rayons, liens soulignés en petites capitales, touche de rouge.

   Couleurs : aucune valeur écrite en dur dans une règle. Chaque couleur est
   soit la variable d'une zone du panneau Design (--t-header-bg, --t-price…,
   voir ~/chantier/contrat-design.md), avec la valeur du thème en repli :
   `var(--t-zone, <valeur du thème>)` ; soit un jeton du thème déclaré une
   seule fois ci-dessous (--ochaka-*), pour ce qui n'appartient à aucune zone
   (texte posé sur une photo, étiquette blanche, aplat remplaçant une photo).
   Sans saisie du marchand, le rendu reste exactement celui du gabarit. */
:root {
    --t-dark: #000;
    --t-muted: #5f615e;
    --t-header-h: 80px;
    --t-shadow: 0 10px 30px -18px rgba(163, 163, 163, .5);

    /* Jetons du thème : couleurs fixes, hors palette du marchand. */
    --ochaka-sur-fonce: #fff;      /* texte posé sur une photo, un voile ou un aplat sombre */
    --ochaka-blanc: #fff;          /* étiquettes et pilules blanches posées sur une photo */
    --ochaka-encre: #000;          /* noir du gabarit (textes des étiquettes blanches, cartes produit) */
    --ochaka-encre-douce: #111;    /* noir adouci des pilules et bons */
    --ochaka-texte-carte: #1a1a1a; /* texte des cartes promotionnelles (fond clair choisi par bloc) */
    --ochaka-gris-barre: #8a8c8a;  /* prix barré des cartes produit */
    --ochaka-aplat-photo: #e4ddd7; /* beige rosé des visuels absents du gabarit */
    --ochaka-gris-clair: #f7f7f7;  /* fond gris très clair des visuels absents */
    --ochaka-texte-carte-doux: #4b4d4a; /* phrase des cartes promotionnelles */
    --ochaka-vert-stock: #3c8a2e;  /* « En stock » : vert de sens, hors palette */
    --ochaka-gris-point: #8a8a8a;  /* points posés sur une photo */
    --ochaka-surface: #f5f5f5;     /* fond alterné du thème (chaque variante a le sien) */

    /* Réglages du marchand : surface, bordures, graisse et espacement des
       titres existent déjà dans le socle avec une valeur par défaut, qui
       masquerait la saisie. On les remet à zéro ici (feuille chargée après le
       socle) : seule la feuille du marchand (<style id="shop-design">, chargée
       après celle-ci) peut alors les poser. Leur copie --ochaka-saisi-* n'existe
       donc QUE si le marchand a saisi la valeur ; body.theme-ochaka recompose
       ensuite la variable du socle : saisie du marchand, sinon valeur du thème
       ou de la variante. */
    --t-surface: initial;
    --t-border: initial;
    --t-head-weight: initial;
    --t-head-spacing: initial;
    --ochaka-saisi-surface: var(--t-surface);
    --ochaka-saisi-bordure: var(--t-border);
    --ochaka-saisi-graisse: var(--t-head-weight);
    --ochaka-saisi-espacement: var(--t-head-spacing);
}
body.theme-ochaka {
    --t-surface: var(--ochaka-saisi-surface, var(--ochaka-surface));
    --t-border: var(--ochaka-saisi-bordure, #ededed);
    --t-head-weight: var(--ochaka-saisi-graisse, 600);
    --t-head-spacing: var(--ochaka-saisi-espacement, 0);
    /* Variables du socle calculées sur :root à partir de --t-surface : on les
       repose ici, avec la valeur qu'elles avaient (surface de base du thème). */
    --grey-color: var(--ochaka-saisi-surface, #f5f5f5);
    --vm-fond-doux: var(--ochaka-saisi-surface, #f5f5f5);

    /* Variantes conditionnelles : chacune n'est valide que si le marchand a
       saisi la zone dont elle dépend (une variable absente rend toute la
       valeur invalide, et c'est alors le repli de var() qui s'applique). */
    --ochaka-btn-survol: color-mix(in srgb, var(--t-btn-bg) 82%, #000);
    --ochaka-btn-survol-texte: var(--t-btn-text);
    --ochaka-sur-promo: color-mix(in srgb, var(--t-sale) 0%, #fff);
    --ochaka-entete-trait: color-mix(in srgb, var(--t-header-text) 16%, transparent);
    --ochaka-entete-survol: color-mix(in srgb, var(--t-header-text) 8%, transparent);
    /* Titres : casse de la disposition du thème, taille réglable. */
    --ochaka-casse: none;
    --ochaka-echelle: var(--t-head-scale, 1);
}
body.theme-ochaka.t-titres--upper { --ochaka-casse: uppercase; }
body.theme-ochaka { font-size: 17px; }
.theme-ochaka p { color: var(--t-muted); }

/* ------------------------------------------------------------- en-tête */
/* Fond et texte de la zone « en-tête » quand le marchand les choisit, sinon
   ceux du style d'en-tête du thème (clair, sombre, couleur principale). */
.theme-ochaka .t-header .t-bar { border-bottom-color: transparent; background: var(--t-header-bg, var(--t-bg)); color: var(--t-header-text, inherit); }
.theme-ochaka.t-header-dark .t-header .t-bar { background: var(--t-header-bg, var(--t-dark)); color: var(--t-header-text, var(--ochaka-sur-fonce)); }
.theme-ochaka.t-header-primary .t-header .t-bar { background: var(--t-header-bg, var(--t-primary)); color: var(--t-header-text, var(--t-on-primary)); }
.theme-ochaka.t-header--sticky .t-header .t-bar { border-bottom-color: var(--ochaka-entete-trait, var(--t-border)); }
.theme-ochaka .t-logo__texte { font-size: 32px; font-weight: 600; letter-spacing: -0.01em; }
.theme-ochaka .oc-point { color: var(--t-secondary); }
.theme-ochaka.t-header--classic .t-nav__liste { justify-content: center; }
.theme-ochaka .t-nav__liste { gap: 4px 34px; }
.theme-ochaka .t-nav__liste a { font-size: 17px; font-weight: 500; }
.theme-ochaka .t-nav__liste a::after { height: 1px; bottom: 4px; }
.theme-ochaka.t-header-light .t-nav__liste a:hover,
.theme-ochaka.t-header-light .t-nav__liste .is-actif a { color: var(--t-header-text, var(--t-primary)); }
.theme-ochaka .t-action { font-size: 19px; }
.theme-ochaka .t-panier__nombre { background: var(--t-badge-bg, var(--t-secondary)); color: var(--t-badge-text, var(--ochaka-sur-fonce)); top: 0; }
/* Menu « Plus » et panneau mobile : même zone que l'en-tête. */
.theme-ochaka .t-nav__sous { background: var(--t-header-bg, var(--t-bg)); color: var(--t-header-text, var(--t-text)); border-color: var(--ochaka-entete-trait, var(--t-border)); }
.theme-ochaka .t-nav__sous a { color: var(--t-header-text, var(--t-text)) !important; }
.theme-ochaka .t-nav__sous a:hover { background: var(--ochaka-entete-survol, var(--t-surface)); }
.theme-ochaka .vm-menu-mobile { background: var(--t-header-bg, var(--t-bg)); color: var(--t-header-text, var(--t-text)); }
.theme-ochaka .vm-menu-mobile :is(.vm-menu-mobile__entete, .vm-menu-mobile__fermer, .vm-menu-mobile__liens a) { color: var(--t-header-text, var(--t-text)); }
.theme-ochaka .vm-menu-mobile .vm-menu-mobile__entete { border-bottom-color: var(--ochaka-entete-trait, var(--t-border)); }
.theme-ochaka .vm-menu-mobile .vm-menu-mobile__liens a { border-bottom-color: var(--ochaka-entete-trait, var(--t-surface)); }
/* Barre du haut (coordonnées, réseaux) : zone « barre du haut ». */
.theme-ochaka .t-topbar { background: var(--t-topbar-bg, var(--ochaka-encre)); color: var(--t-topbar-text, rgba(255, 255, 255, .86)); font-size: 14px; }
.theme-ochaka .t-topbar a:hover { color: var(--t-topbar-text, var(--ochaka-sur-fonce)); }

/* Bandeau d'annonces : noir, comme la barre du gabarit (couleurs du bandeau
   dans la vue, zone « barre du haut » prioritaire). */
.theme-ochaka .vm-annonces { font-size: 14px; letter-spacing: .01em; }

/* ------------------------------------------------- disposition de l'en-tête
   Réglage « Disposition de l'en-tête » du panneau Design : attribut
   data-t-header sur <html> (posé par le socle) ou classe oc-disposition--*
   posée par la vue d'en-tête. Sur ordinateur seulement : sur téléphone,
   l'en-tête reste « menu, logo, icônes » quelle que soit la disposition. */
@media (min-width: 992px) {
    :is(html[data-t-header="gauche"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--gauche) .t-bar__inner {
        grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav actions"; gap: 24px; padding-top: 0;
    }
    :is(html[data-t-header="gauche"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--gauche) .t-logo { justify-self: start; }
    :is(html[data-t-header="gauche"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--gauche) .t-nav__liste { justify-content: flex-start; padding: 0; gap: 4px 34px; }
    :is(html[data-t-header="gauche"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--gauche) .t-nav__liste a { font-size: 17px; }
    :is(html[data-t-header="gauche"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--gauche) .t-actions { justify-self: end; }
    :is(html[data-t-header="gauche"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--gauche) .t-nav__sous { inset-inline-start: auto; inset-inline-end: 0; }

    :is(html[data-t-header="centre"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--centre) .t-bar__inner {
        grid-template-columns: 1fr auto 1fr; grid-template-areas: ". logo actions" "nav nav nav"; gap: 0 24px; padding-top: 14px;
    }
    :is(html[data-t-header="centre"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--centre) .t-logo { justify-self: center; }
    :is(html[data-t-header="centre"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--centre) .t-nav__liste { justify-content: center; padding: 6px 0 4px; gap: 4px 34px; }
    :is(html[data-t-header="centre"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--centre) .t-nav__liste a { font-size: 17px; }
    :is(html[data-t-header="centre"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--centre) .t-actions { justify-self: end; }
    :is(html[data-t-header="centre"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--centre) .t-nav__sous { inset-inline-start: auto; inset-inline-end: 0; }

    :is(html[data-t-header="scinde"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--scinde) .t-bar__inner {
        grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav logo actions"; gap: 24px; padding-top: 0;
    }
    :is(html[data-t-header="scinde"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--scinde) .t-logo { justify-self: center; }
    /* Menu resserré pour tenir sur une ligne à gauche du logo. */
    :is(html[data-t-header="scinde"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--scinde) .t-nav__liste { justify-content: flex-start; padding: 0; gap: 4px 20px; }
    :is(html[data-t-header="scinde"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--scinde) .t-nav__liste a { font-size: 15px; }
    :is(html[data-t-header="scinde"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--scinde) .t-actions { justify-self: end; }
    :is(html[data-t-header="scinde"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--scinde) .t-nav__sous { inset-inline-end: auto; inset-inline-start: 0; }
}
@media (max-width: 991.98px) {
    /* « Logo à gauche » : sur téléphone, le logo suit le bouton du menu. */
    :is(html[data-t-header="gauche"] .theme-ochaka, .theme-ochaka .t-header.oc-disposition--gauche) .t-logo { justify-self: start; }
}

/* En-tête fixe au défilement (data-t-sticky). */
html[data-t-sticky="oui"] .theme-ochaka .t-header { position: sticky; top: 0; }
html[data-t-sticky="oui"] .theme-ochaka .t-header .t-bar { border-bottom-color: var(--ochaka-entete-trait, var(--t-border)); }
html[data-t-sticky="non"] .theme-ochaka .t-header { position: relative; }
html[data-t-sticky="non"] .theme-ochaka .t-header .t-bar { border-bottom-color: transparent; }

/* ------------------------------------------------------------- boutons */
/* Zone « boutons » : fond et texte des boutons principaux. `:where` : la
   règle ne pèse pas plus que celle des blocs qui les recolorent. */
.theme-ochaka :is(.t-btn, .rr-btn, .pq-summary-cta, .button-flat, .btn-primary):where(:not(.t-btn--contour, .bb__btn-ghost)) {
    background: var(--t-btn-bg, var(--t-primary)); border-color: var(--t-btn-bg, var(--t-primary)); color: var(--t-btn-text, var(--t-on-primary));
}
.theme-ochaka .t-btn, .theme-ochaka .rr-btn, .theme-ochaka .pq-summary-cta, .theme-ochaka .btn-primary {
    font-size: 18px; font-weight: 600; padding: 14px 32px;
}
.theme-ochaka .t-btn::after, .theme-ochaka .rr-btn::after { content: "→"; font-size: 1em; transition: transform .25s ease; }
.theme-ochaka .t-btn:hover::after, .theme-ochaka .rr-btn:hover::after { transform: translateX(4px); }
.theme-ochaka .t-recherche__form .t-btn::after { content: none; }
/* Survol : la secondaire du thème, ou le bouton du marchand assombri. */
.theme-ochaka .t-btn:hover, .theme-ochaka .rr-btn:hover, .theme-ochaka .pq-summary-cta:hover, .theme-ochaka .btn-primary:hover {
    background: var(--ochaka-btn-survol, var(--t-secondary)); border-color: var(--ochaka-btn-survol, var(--t-secondary)); color: var(--ochaka-btn-survol-texte, var(--ochaka-sur-fonce));
}

/* ------------------------------------------------------------ bannière */
.theme-ochaka .bb-hero__titre { font-weight: var(--ochaka-saisi-graisse, 600); font-size: calc(clamp(40px, 6vw, 72px) * var(--ochaka-echelle)); line-height: 1.05; }
.theme-ochaka .bb__eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--t-secondary); }
/* Bannière « couverture » sans photo : aplat beige du gabarit, texte noir. */
.theme-ochaka .bb-hero--cover { --ochaka-hero-a: #e4ddd7; --ochaka-hero-b: #cfc6bd; background: linear-gradient(120deg, var(--ochaka-hero-a), var(--ochaka-hero-b)); color: var(--ochaka-encre); }
.theme-ochaka .bb-hero--cover .bb-hero__titre, .theme-ochaka .bb-hero--cover .bb__eyebrow { color: var(--ochaka-encre); }
.theme-ochaka .bb-hero--cover .bb-hero__accroche { color: var(--ochaka-encre-douce); }
.theme-ochaka .bb-hero--cover[style*="--bb-hero-image"],
.theme-ochaka .bb-hero--cover[style*="--bb-hero-image"] .bb-hero__titre,
.theme-ochaka .bb-hero--cover[style*="--bb-hero-image"] .bb__eyebrow,
.theme-ochaka .bb-hero--cover[style*="--bb-hero-image"] .bb-hero__accroche { color: var(--ochaka-sur-fonce); }
.theme-ochaka .bb-hero--cover .bb-hero__inner { text-align: start; }
.theme-ochaka .bb-hero--cover .bb-hero__texte { margin-inline: 0; }
.theme-ochaka .bb-hero--cover .bb-hero__accroche { margin-inline: 0; }
.theme-ochaka .bb-hero--cover .bb-hero__boutons { justify-content: flex-start; }
.theme-ochaka .bb-hero--sans-image .bb-hero__visuel { --ochaka-hero-a: #ece6e0; --ochaka-hero-b: #d8cfc6; background: linear-gradient(140deg, var(--ochaka-hero-a), var(--ochaka-hero-b)); }
.theme-ochaka .bb-hero__forme { background: rgba(255, 255, 255, .35); }

/* ----------------------------------------------------------------- blocs */
.theme-ochaka .bb__title { font-weight: var(--ochaka-saisi-graisse, 600); font-size: calc(clamp(30px, 3.6vw, 46px) * var(--ochaka-echelle)); }
/* Tuiles de rayons : étiquette pilule blanche « Nom | ACHETER ». */
.theme-ochaka .bb-rayons--overlay .bb-rayon__visuel { border-radius: 0; background: var(--ochaka-saisi-surface, var(--ochaka-aplat-photo)); }
.theme-ochaka .bb-rayons--overlay .bb-rayon__visuel::after { background: none; }
.theme-ochaka .bb-rayons--overlay .bb-rayon__nom {
    left: 50%; right: auto; bottom: 26px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 16px; white-space: nowrap;
    padding: 14px 26px; border-radius: 999px; background: var(--ochaka-blanc); color: var(--ochaka-encre);
    font-size: 22px; font-weight: 400; text-shadow: none;
}
.theme-ochaka .bb-rayons--overlay .bb-rayon__nom::after {
    content: "Acheter"; padding-inline-start: 16px; border-inline-start: 1px solid var(--ochaka-encre);
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px;
}
.theme-ochaka .bb-rayon__nom { font-size: 18px; font-weight: 500; }
.theme-ochaka .bb-feature { text-align: center; }
.theme-ochaka .bb-feature h6 { font-size: 19px; font-weight: 600; }
.theme-ochaka .bb-cta { background: var(--ochaka-saisi-surface, #f6f4f1); }

/* ------------------------------------------------------------ produits */
.theme-ochaka .pq-shop-product-img { background: var(--ochaka-saisi-surface, var(--ochaka-chaud-a, #ece6e0)); }
.theme-ochaka .pq-shop-product-img::after { background: none; }
.theme-ochaka .pq-shop-box .pq-product-detail .pq-product-name { font-size: 20px; font-weight: 400; color: var(--ochaka-encre); }
/* Zones « prix » et « promo » : prix courant, prix remisé, pastille de remise. */
.theme-ochaka .pq-shop-box .pq-product-detail .pq-product-price { font-size: 18px; font-weight: 600; color: var(--t-price, var(--ochaka-encre)); }
.theme-ochaka .pq-shop-box .pq-product-detail .pq-product-price del { color: var(--ochaka-gris-barre); font-weight: 400; }
.theme-ochaka .pq-shop-box .pq-product-detail .pq-product-price del ~ .pq-montant { color: var(--t-sale, var(--t-price, var(--ochaka-encre))); }
.theme-ochaka .pq-badge-sale { background: var(--t-sale, var(--t-secondary)); color: var(--ochaka-sur-promo, var(--t-on-primary)); border-radius: 0; font-weight: 600; }
/* Zone « badges » : Nouveau, Épuisé. */
.theme-ochaka .pq-badge-new { background: var(--t-badge-bg, #1f7a4c); color: var(--t-badge-text, var(--ochaka-sur-fonce)); }
.theme-ochaka .pq-badge-out { background: var(--t-badge-bg, #c0392b); color: var(--t-badge-text, var(--ochaka-sur-fonce)); }
.theme-ochaka .pq-shop-box .pq-button-contain .pq-cart-button { border-radius: 999px; font-weight: 600; background: var(--t-btn-bg, var(--t-primary)); color: var(--t-btn-text, var(--t-on-primary)); }
.theme-ochaka .pq-shop-box .pq-button-contain .pq-cart-button:hover { background: var(--ochaka-btn-survol, var(--t-primary-fonce)); }

/* Cartes produit : réglages du panneau Design (attributs du socle sur <html>). */
html[data-t-cartes="portrait"] .theme-ochaka :is(.pq-shop-product-img img, .pq-no-image) { aspect-ratio: 3 / 4; object-fit: cover; padding: 0; }
html[data-t-cartes="carre"] .theme-ochaka :is(.pq-shop-product-img img, .pq-no-image) { aspect-ratio: 1; object-fit: cover; padding: 0; }
html[data-t-cartes="paysage"] .theme-ochaka :is(.pq-shop-product-img img, .pq-no-image) { aspect-ratio: 4 / 3; object-fit: cover; padding: 0; }
html[data-t-ombre="oui"] .theme-ochaka .pq-shop-box { overflow: hidden; background: var(--t-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 10px 28px -16px rgba(0, 0, 0, .3); }
html[data-t-ombre="oui"] .theme-ochaka .pq-shop-box .pq-product-detail { padding: 4px 14px 16px; }
html[data-t-ombre="non"] .theme-ochaka .pq-shop-box,
html[data-t-ombre="non"] .theme-ochaka .pq-shop-box:hover { box-shadow: none; }
html[data-t-bouton-carte="toujours"] .theme-ochaka .pq-shop-box .pq-button-contain { position: static; transform: none; }
html[data-t-bouton-carte="toujours"] .theme-ochaka .pq-shop-box .pq-button-contain .pq-cart-button { margin-top: 10px; }
html[data-t-bouton-carte="jamais"] .theme-ochaka .pq-shop-box .pq-button-contain { display: none; }
@media (hover: hover) and (min-width: 768px) {
    html[data-t-bouton-carte="survol"] .theme-ochaka .pq-shop-box .pq-button-contain { position: absolute; left: 0; bottom: 0; transform: translateY(100%); }
    html[data-t-bouton-carte="survol"] .theme-ochaka .pq-shop-box .pq-shop-product-img:hover .pq-button-contain { transform: translateY(0); }
    html[data-t-bouton-carte="survol"] .theme-ochaka .pq-shop-box .pq-button-contain .pq-cart-button { margin-top: 0; }
}

/* -------------------------------------------------------------- pied */
/* Zone « pied de page » : fond et texte, sinon ceux du style de pied du thème. */
.theme-ochaka .t-footer { background: var(--t-footer-bg, var(--t-dark)); color: var(--t-footer-text, rgba(255, 255, 255, .78)); }
.theme-ochaka.t-footer-light .t-footer { background: var(--t-footer-bg, var(--t-surface)); color: var(--t-footer-text, var(--t-muted)); }
.theme-ochaka.t-footer-primary .t-footer { background: var(--t-footer-bg, var(--t-primary)); color: var(--t-footer-text, color-mix(in srgb, var(--t-on-primary) 85%, transparent)); }
.theme-ochaka .t-footer :is(.t-logo__texte, .t-footer__titre, .t-footer__lettre-titre) { color: var(--t-footer-text, var(--ochaka-sur-fonce)); }
.theme-ochaka.t-footer-light .t-footer :is(.t-logo__texte, .t-footer__titre, .t-footer__lettre-titre) { color: var(--t-footer-text, var(--t-text)); }
.theme-ochaka.t-footer-primary .t-footer :is(.t-logo__texte, .t-footer__titre, .t-footer__lettre-titre) { color: var(--t-footer-text, var(--t-on-primary)); }
.theme-ochaka .t-footer a:hover { color: var(--t-footer-text, var(--ochaka-sur-fonce)); }
.theme-ochaka.t-footer-light .t-footer a:hover { color: var(--t-footer-text, var(--t-primary)); }
/* Paragraphes du pied : gris du thème, ou texte de la zone « pied » pour garder le contraste. */
.theme-ochaka .t-footer p { color: var(--t-footer-text, var(--t-muted)); }
.theme-ochaka .t-footer__titre { font-size: 20px; font-weight: 600; }
.theme-ochaka .t-footer__liens a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.theme-ochaka .t-footer__liens a:hover { text-decoration-color: currentColor; color: var(--t-footer-text, var(--ochaka-sur-fonce)); }
.theme-ochaka.t-footer-light .t-footer__liens a:hover { color: var(--t-footer-text, var(--ochaka-encre)); }
.theme-ochaka .t-lettre input { border-radius: 999px; }
/* Pied « couleur principale » : bouton de la lettre sombre du socle, ou celui du marchand. */
.theme-ochaka.t-footer-primary .t-lettre .t-btn { background: var(--t-btn-bg, var(--t-dark)); border-color: var(--t-btn-bg, var(--t-dark)); color: var(--t-btn-text, var(--t-on-primary)); }
/* Étiquettes carrées, comme celles du gabarit (Hot, New, Trending…). */
.theme-ochaka .pq-product-badge { border-radius: 0; box-shadow: none; font-weight: 500; }
/* Petites tuiles (tablette, téléphone) : l'étiquette se resserre et perd « Acheter ». */
@media (max-width: 991.98px) {
    .theme-ochaka .bb-rayons--overlay .bb-rayon__nom {
        bottom: 12px; max-width: calc(100% - 20px); padding: 8px 16px;
        font-size: 14px; line-height: 1.25; border-radius: 18px; white-space: normal; text-align: center; justify-content: center;
    }
    .theme-ochaka .bb-rayons--overlay .bb-rayon__nom::after { content: none; }
}

/* ============================================================ variantes
   Chaque variante (resources/themes/ochaka/theme.php) change déjà couleurs,
   polices et réglages par les variables --t-*. On n'affine ici que ce que
   ces variables ne portent pas : la teinte des surfaces (--ochaka-surface,
   qu'une saisie du marchand remplace) et des aplats « chauds », la couleur
   secondaire employée comme texte quand elle est trop claire pour être lue
   sur blanc, et quelques détails de caractère. */
/* Préfixe « body » sur les règles de variante : theme.css est chargée avant
   blocs.css, une règle de variante doit peser plus que la règle générale. */
/* --- Bijoux (Jewelry) : en-tête, bandeau d'annonces et diaporama partagent
   la même teinte taupe et des textes blancs, comme l'en-tête transparent
   posé sur la photo de la démo. Taupe assez sombre pour un contraste
   suffisant du texte blanc (≥ 4,5:1). */
body.theme-ochaka--bijoux {
    --ochaka-surface: #faf3f1;
    --t-dark: #7a675a;
    --ochaka-taupe-clair: #8a776a;
    --ochaka-accent-texte: #8a6a3a;
}
body.theme-ochaka--bijoux .t-logo__texte { text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
body.theme-ochaka--bijoux .ochaka-defile { border-block-start: 1px solid rgba(255, 255, 255, .18); }
body.theme-ochaka--bijoux .ochaka-diapo .ochaka-aplat--sombre { background: var(--t-dark); }
body.theme-ochaka--bijoux .ochaka-diapo .ochaka-aplat--sombre::before { background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .12), transparent 70%); }
body.theme-ochaka--bijoux .ochaka-duo .ochaka-aplat--sombre { background: linear-gradient(160deg, var(--ochaka-taupe-clair), var(--t-dark)); }
body.theme-ochaka--bijoux :is(.ochaka-titre, .ochaka-offre__titre, .ochaka-vedette__titre, .ochaka-diapo__titre, .ochaka-duo__titre) { font-weight: var(--ochaka-saisi-graisse, 500); }
body.theme-ochaka--bijoux .ochaka-diapo__surtitre { opacity: 1; }

/* --- Cosmétique (Cosmetic) : gris très clair des avis, pied noir. */
body.theme-ochaka--cosmetique { --ochaka-surface: #f4f4f4; }

/* --- Déco (Decor) : beige des aplats repris de la démo. */
body.theme-ochaka--deco { --ochaka-chaud-a: #e9e2dc; --ochaka-chaud-b: #ddd4cc; }

/* --- Sport (Gym) : boutons rouges carrés en capitales, avis sur gris foncé. */
body.theme-ochaka--sport {
    --ochaka-surface: #f5f7fb;
    --ochaka-carte-fond: #f7f8fc;
    --ochaka-avis-sombre: #7f7f7f;
    --ochaka-aplat-nuit: #0b0f13;
    --ochaka-aplat-ardoise: #20262a;
    --ochaka-aplat-froid: #f5f7fb;
    --ochaka-aplat-blanc: #fafafa;
}
body.theme-ochaka--sport .ochaka-titre,
body.theme-ochaka--sport .ochaka-diapo__titre { font-weight: var(--ochaka-saisi-graisse, 600); }
body.theme-ochaka--sport .t-btn { text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
body.theme-ochaka--sport .t-btn:not(.ochaka-btn-blanc) { background: var(--t-btn-bg, var(--t-secondary)); border-color: var(--t-btn-bg, var(--t-secondary)); color: var(--t-btn-text, var(--ochaka-sur-fonce)); }
body.theme-ochaka--sport .t-btn:not(.ochaka-btn-blanc):hover { background: var(--ochaka-btn-survol, var(--t-dark)); border-color: var(--ochaka-btn-survol, var(--t-dark)); }
body.theme-ochaka--sport .ochaka-diapo__slide--clair .t-btn { background: var(--t-btn-bg, var(--t-secondary)); border-color: var(--t-btn-bg, var(--t-secondary)); color: var(--t-btn-text, var(--ochaka-sur-fonce)); }
body.theme-ochaka--sport .ochaka-diapo .ochaka-aplat--sombre { background: var(--ochaka-aplat-nuit); }
body.theme-ochaka--sport .ochaka-collections .ochaka-aplat--neutre { background: var(--ochaka-saisi-surface, var(--ochaka-aplat-froid)); }
body.theme-ochaka--sport .ochaka-collections .ochaka-aplat::before { content: none; }
body.theme-ochaka--sport .ochaka-collections--bord .ochaka-collections__grille { gap: 8px; padding-inline: 8px; }
body.theme-ochaka--sport .ochaka-image-texte .ochaka-aplat--sombre { background: var(--ochaka-aplat-ardoise); }
body.theme-ochaka--sport .ochaka-parallaxe.ochaka-aplat--neutre { background: var(--ochaka-saisi-surface, var(--ochaka-aplat-blanc)); }

/* --- Animalerie (Pet store) : violet profond, vert anis vif pour les
   pastilles, l'onglet actif et les boutons sur fond violet. */
body.theme-ochaka--animalerie {
    --ochaka-surface: #f6f4fb;
    --ochaka-vif: #d7eb3a;
    --ochaka-vif-texte: #1e1b2e;
    --ochaka-onglet-actif: #d7eb3a;
}
body.theme-ochaka--animalerie .ochaka-parallaxe--clair .t-btn { background: var(--t-btn-bg, var(--ochaka-vif)); border-color: var(--t-btn-bg, var(--ochaka-vif)); color: var(--t-btn-text, var(--ochaka-vif-texte)); }
body.theme-ochaka--animalerie .ochaka-parallaxe--clair .t-btn:hover { background: var(--ochaka-btn-survol, var(--ochaka-blanc)); border-color: var(--ochaka-btn-survol, var(--ochaka-blanc)); color: var(--ochaka-btn-survol-texte, var(--ochaka-encre-douce)); }
body.theme-ochaka--animalerie .ochaka-diapo .ochaka-aplat--chaud { background: var(--ochaka-saisi-surface, var(--ochaka-aplat-photo)); }
body.theme-ochaka--animalerie .t-panier__nombre { background: var(--t-badge-bg, var(--t-secondary)); }

/* --- Électronique (Electronic market) : barre et en-tête bleu nuit. */
body.theme-ochaka--electronique { --ochaka-surface: #f5f5f5; }
body.theme-ochaka--electronique .t-topbar { background: var(--t-topbar-bg, #021a62); border-block-end: 1px solid rgba(255, 255, 255, .12); }
body.theme-ochaka--electronique .ochaka-diapo .ochaka-aplat--chaud { background: var(--ochaka-saisi-surface, var(--ochaka-aplat-photo)); }
body.theme-ochaka--electronique .ochaka-diapo .ochaka-aplat--chaud::before { content: none; }

/* --- Bio (Organic) : barre blanche, vert franc, coupon vert. */
body.theme-ochaka--bio { --ochaka-surface: #f6f8f4; }
body.theme-ochaka--bio .t-topbar { background: var(--t-topbar-bg, var(--t-bg)); color: var(--t-topbar-text, var(--t-muted)); border-block-end: 1px solid var(--t-border); }
body.theme-ochaka--bio .t-topbar a { color: inherit; }

/* --- Montres (Watch) : gris clair froid des aplats et du fond des offres. */
body.theme-ochaka--montres { --ochaka-surface: #f5f5f5; --ochaka-trio-fond: #f7f7f7; --ochaka-carte-fond: #f7f8fc; --ochaka-aplat-gris: #f1f1f1; --ochaka-aplat-froid: #f5f7fb; }
body.theme-ochaka--montres .ochaka-diapo .ochaka-aplat--neutre { background: var(--ochaka-saisi-surface, var(--ochaka-aplat-gris)); }
body.theme-ochaka--montres .ochaka-collections .ochaka-aplat--neutre { background: var(--ochaka-saisi-surface, var(--ochaka-aplat-froid)); }
body.theme-ochaka--montres :is(.ochaka-diapo, .ochaka-collections) .ochaka-aplat::before { content: none; }
body.theme-ochaka--montres .ochaka-diapo__titre { font-weight: var(--ochaka-saisi-graisse, 500); }

/* --- Sneakers (Sneaker) : beige des aplats repris de la démo. */
body.theme-ochaka--sneakers { --ochaka-surface: #f8f8f8; --ochaka-chaud-a: #e6dfda; --ochaka-chaud-b: #ddd5cf; }
/* --- Variantes refaites dans resources/themes/ochaka/variantes/ (second développeur) :
   affinages conservés tels quels. */
.theme-ochaka--librairie {
    --ochaka-surface: #fbf4ee;
    --t-dark: #24361f;
}
.theme-ochaka--librairie .ochaka-titre { font-weight: var(--ochaka-saisi-graisse, 500); }

.theme-ochaka--auto {
    --ochaka-surface: #f4f5f7;
    --t-dark: #1f2937;
}

.theme-ochaka--sante {
    --ochaka-surface: #eef4ff;
    --t-dark: #13203f;
}

.theme-ochaka--accessoires {
    --ochaka-surface: #f3f1fb;
    --t-dark: #2b2350;
}
/* Panneau de recherche sur mobile : il reste dans l'écran, bouton compris
   (le bouton pilule du thème est plus large que celui du socle). */
@media (max-width: 991.98px) {
    .theme-ochaka .t-recherche__form { inset-inline: 16px; max-inline-size: calc(100vw - 32px); box-sizing: border-box; }
    .theme-ochaka .t-recherche__form .t-btn { flex-shrink: 0; padding-inline: 16px; font-size: 15px; letter-spacing: 0; }
}
/* En-tête mobile : le logo (32 px, et très espacé sous Bijoux) ne pousse plus
   le panier hors de l'écran. */
@media (max-width: 991.98px) {
    .theme-ochaka .t-logo { min-width: 0; }
    .theme-ochaka .t-logo__texte { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26px; }
    .theme-ochaka--bijoux .t-logo__texte { letter-spacing: .04em; }
}
body.theme-ochaka--sport .ochaka-diapo .ochaka-aplat::before { content: none; }