/* ==========================================================================
   05 — EN-TÊTE, NAVIGATION, MINI-PANIER, FIL D'ARIANE

   Sélecteurs relevés sur cocopassion.fr le 21 août 2026 : OceanWP nomme son
   en-tête `#site-header`, sa barre haute `#top-bar-wrap`, son menu
   `#site-navigation`, et son panier de menu `.wcmenucart`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BARRE D'ANNONCE
   La barre haute porte aujourd'hui « Livraison gratuite à La Réunion à partir
   de 80 euros d'achat » en gris clair, et sur le tunnel un avertissement en
   rouge vif sur la suspension des envois vers la métropole. Deux messages de
   nature différente traités de la même façon, ou presque.

   On leur donne deux traitements distincts : l'offre en bandeau chaud, et
   l'information de service en bandeau d'alerte sobre.
   -------------------------------------------------------------------------- */

body.cp #top-bar-wrap {
  /* Deux teintes au lieu de trois depuis le passage au rose : le rose
     d'accent et le bordeaux SONT la meme teinte (342 deg), le degrade ne fait
     donc que varier la clarte — c'est net. Le flamboyant qui les separait
     avant tirait vers le rouge orange et cassait cette continuite. */
  background: linear-gradient(96deg,
    var(--cp-accent) 0%,
    var(--cp-bordeaux) 100%);
  border: 0;
  color: var(--cp-blanc);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-xs);
  letter-spacing: 0.04em;
  padding-block: 0.26rem;
}
/* Les 16 px qui restaient. La barre empile DEUX gouttières : la nôtre sur
   `#top-bar-wrap`, et celle d'OceanWP sur `#top-bar` — 8 px en haut, 8 en
   bas, valeurs par défaut du Customizer, sorties en `<style>` dans l'entête.
   Tant qu'on ne remet pas celle-ci à zéro, affiner la nôtre ne gagne que la
   moitié de ce qu'on croit : le bandeau mesurait 48 px. */
body.cp #top-bar { padding-block: 0; }
body.cp #top-bar-wrap a { color: var(--cp-blanc); text-decoration-color: rgba(255, 255, 255, 0.5); }
body.cp #top-bar-wrap .cp-annonce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cp-e-2);
  font-size: 0.7rem;
  font-weight: 500;
}
body.cp #top-bar-wrap .cp-annonce svg { width: 11px; height: 11px; flex: none; }

/* Message de service : information, pas promotion. Fond sable, filet
   flamboyant à gauche, aucune capitale forcée, aucun rouge criard. */
body.cp .cp-avis-service {
  display: flex;
  gap: var(--cp-e-3);
  align-items: flex-start;
  background: var(--cp-gris-voile);
  border-left: 3px solid var(--cp-f-flamboyant);
  border-radius: var(--cp-r-sm);
  color: var(--cp-texte);
  font-size: var(--cp-t-s);
  line-height: 1.5;
  padding: var(--cp-e-3) var(--cp-e-4);
  margin: 0 auto var(--cp-e-5);
  max-width: var(--cp-largeur);
  text-align: left;
}
body.cp .cp-avis-service strong { color: var(--cp-f-flamboyant-texte); }

/* --------------------------------------------------------------------------
   2. EN-TÊTE
   -------------------------------------------------------------------------- */

body.cp #site-header {
  background: var(--cp-fond);
  border-bottom: 1px solid var(--cp-trait);
  box-shadow: none;
}
/* Fond plein, pas translucide. Le verre dépoli (crème à 88 % + `blur`) était
   plus joli à l'arrêt, mais l'en-tête flotte au-dessus de la page : le haut
   des cartes produit et du panneau de filtres se devinait au travers pendant
   le défilement. Un en-tête collé doit cacher ce qui passe dessous. */
body.cp #site-header.is-sticky,
body.cp .is-sticky #site-header {
  background: var(--cp-fond);
  box-shadow: var(--cp-ombre-2);
}

body.cp #site-logo img {
  width: auto;
  height: 44px;
  transition: height var(--cp-lent) var(--cp-courbe), transform var(--cp-lent) var(--cp-courbe);
}
/* `!important`, et c'est le seul endroit du thème qui en porte. Le
   `shrink-header` d'OceanWP mesure le logo au chargement puis lui pose un
   `max-height` EN LIGNE au défilement : une déclaration de feuille, si
   spécifique soit-elle, ne passe pas devant un style en ligne. Sans ces deux
   `!important`, le logo restait cloué à sa taille de repos. */
body.cp #site-header.is-sticky #site-logo img,
body.cp .is-sticky #site-header #site-logo img {
  height: 46px !important;
  max-height: none !important;
}
body.cp #site-logo a:hover img { transform: scale(1.04) rotate(-2deg); }

/* --------------------------------------------------------------------------
   3. NAVIGATION
   Le menu est aujourd'hui en capitales Lato. On repasse en bas-de-casse dans
   la police de texte, et on remplace le survol par un trait qui se déroule
   depuis la gauche — une seule propriété animée, `transform`, donc composée
   par le GPU sans provoquer de recalcul de mise en page.
   -------------------------------------------------------------------------- */

body.cp #site-navigation .dropdown-menu > li > a,
body.cp #site-navigation .main-menu > li > a {
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cp-texte);
  position: relative;
}
body.cp #site-navigation .main-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  height: 2px;
  background: var(--cp-bordeaux);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cp-lent) var(--cp-courbe);
}
body.cp #site-navigation .main-menu > li > a:hover::after,
body.cp #site-navigation .main-menu > li.current-menu-item > a::after { transform: scaleX(1); }
body.cp #site-navigation .main-menu > li > a:hover,
body.cp #site-navigation .main-menu > li.current-menu-item > a { color: var(--cp-encre); }

/* Six entrées depuis le 2 octobre 2026 (« Points de vente », promis au devis
   n° 9). Entre 960 px — où le menu complet remplace le menu mobile — et
   ~995 px, la sixième passait à la ligne et l'en-tête doublait de hauteur
   (75 → 149 px, mesuré). On resserre l'écart du thème, 15 px de part et
   d'autre, sur cette seule plage. */
@media (min-width: 960px) and (max-width: 1099px) {
  body.cp #site-navigation .main-menu > li > a {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Sous-menu déroulant */
body.cp #site-navigation ul.sub-menu {
  background: var(--cp-blanc);
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-md);
  box-shadow: var(--cp-ombre-2);
  padding: var(--cp-e-2);
  overflow: hidden;
}
body.cp #site-navigation ul.sub-menu li a {
  border: 0;
  border-radius: var(--cp-r-sm);
  color: var(--cp-texte);
  font-size: var(--cp-t-s);
  padding: 0.55em 0.8em;
}
body.cp #site-navigation ul.sub-menu li a:hover {
  background: var(--cp-bordeaux-voile);
  color: var(--cp-bordeaux);
}

/* --------------------------------------------------------------------------
   4. LE PANIER DE L'EN-TÊTE

   RELEVÉ DU 4 SEPTEMBRE 2026, panier rempli, sur la préprod.

   Le balisage d'OceanWP est trompeur : `.wcmenucart-count` n'est PAS la
   pastille de comptage, c'est l'enveloppe qui contient l'icône *et* la
   pastille. La feuille précédente lui donnait le fond bordeaux : l'icône du
   panier devenait une tache bordeaux, pendant que la vraie pastille —
   `.wcmenucart-details.count` — restait au bleu #13aff0 d'OceanWP, avec sa
   petite flèche en triangle de bulle de dialogue.

   Le contenu du panneau déroulant, lui, n'est produit ni par OceanWP ni par
   WooCommerce : Elementor Pro détourne `cart/mini-cart.php` et sort un
   balisage `elementor-menu-cart__*` que rien ici ne stylait. On lui a repris
   ce gabarit (voir `mu-plugins/cocopassion-boutique.php` et
   `woocommerce/cart/mini-cart.php`) ; les classes ci-dessous sont celles de
   notre gabarit.
   -------------------------------------------------------------------------- */

/* 4.1 — LE DÉCLENCHEUR
   -------------------------------------------------------------------------- */

body.cp li.woo-menu-icon > a.wcmenucart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cp-e-2);
  min-width: 44px;                  /* cible tactile WCAG 2.5.8 */
  min-height: 44px;
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  font-weight: 600;
  color: var(--cp-encre);
  font-variant-numeric: tabular-nums;
  transition: color var(--cp-vite) var(--cp-courbe);
}
body.cp li.woo-menu-icon > a.wcmenucart:hover { color: var(--cp-bordeaux); }

/* L'enveloppe redevient ce qu'elle est : un repère de positionnement. */
body.cp .wcmenucart-count {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  line-height: 1;
}
body.cp .wcmenucart-count > i {
  display: block;
  font-size: 21px;
  line-height: 1;
}

/* La pastille : un jeton rond posé sur l'anse du panier, cerné de la couleur
   du fond pour se détacher de l'icône sans trait supplémentaire. */
body.cp .wcmenucart-details.count {
  position: absolute;
  top: -7px;
  right: -10px;
  margin: 0;
  padding-inline: 0.32em;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  background: var(--cp-bordeaux);
  border: 2px solid var(--cp-fond);
  border-radius: var(--cp-r-pill);
  color: var(--cp-blanc);
  font-family: var(--cp-font-texte);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
}
/* La flèche de bulle de dialogue d'OceanWP n'a plus d'objet. */
body.cp .wcmenucart-details.count::before { content: none; }

/* Panier vide : la pastille afficherait « 0 », ce qui n'apprend rien. La
   classe est posée par le script (voir `panierVide()` dans cocopassion.js) ;
   sans JavaScript, le zéro reste affiché — ce qui est exact, juste bavard. */
body.cp .wcmenucart.cp-panier-vide .wcmenucart-details.count { display: none; }

body.cp .wcmenucart-details.count.cp-pulse { animation: cp-pulse 620ms var(--cp-courbe); }
@keyframes cp-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0    color-mix(in srgb, var(--cp-bordeaux) 55%, transparent); }
  45%  { transform: scale(1.28); box-shadow: 0 0 0 8px  color-mix(in srgb, var(--cp-bordeaux) 0%,  transparent); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0    transparent; }
}

/* 4.2 — LE PANNEAU
   -------------------------------------------------------------------------- */

body.cp .current-shop-items-dropdown {
  width: min(384px, calc(100vw - 2rem));
  right: -12px;
  background: var(--cp-blanc);
  border: 1px solid var(--cp-trait);
  border-top: 3px solid var(--cp-bordeaux);
  border-radius: var(--cp-r-md);
  box-shadow: var(--cp-ombre-3);
  padding: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: opacity var(--cp-lent) var(--cp-courbe),
              transform var(--cp-lent) var(--cp-courbe),
              visibility var(--cp-lent);
}
body.cp .wcmenucart-toggle-drop_down:hover .current-shop-items-dropdown,
body.cp .show-cart .wcmenucart-toggle-drop_down .current-shop-items-dropdown {
  transform: translateY(0);
}
body.cp .current-shop-items-inner,
body.cp .current-shop-items-dropdown .widget_shopping_cart,
body.cp .current-shop-items-dropdown .widget_shopping_cart_content {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}

/* 4.3 — LE CONTENU
   -------------------------------------------------------------------------- */

body.cp .cp-mini__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cp-e-3);
  padding: var(--cp-mini-marge) var(--cp-mini-marge) var(--cp-e-3);
  border-bottom: 1px solid var(--cp-trait);
}
body.cp .cp-mini__titre {
  font-family: var(--cp-font-titre);
  font-size: var(--cp-t-l);
  line-height: var(--cp-lh-titre);
  color: var(--cp-encre);
  margin: 0;
}
body.cp .cp-mini__compte {
  font-family: var(--cp-font-mono);
  font-size: var(--cp-t-xs);
  letter-spacing: 0.04em;
  color: var(--cp-texte-doux);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La liste défile, le pied et l'en-tête restent en place : au-delà de trois
   articles, un panneau qui grandit finit sous la ligne de flottaison et les
   deux boutons deviennent inatteignables. */
/*
 * LA GOUTTIERE QUI N'ETAIT JAMAIS APPLIQUEE
 *
 * Mesure du 4 septembre 2026 : cette liste avait `padding-left: 0` et
 * `padding-right: 0` — les articles couraient d'un bord a l'autre du
 * panneau, pendant que l'en-tete et le pied, eux, respectaient leur marge.
 *
 * La cause n'est pas la specificite seule mais l'ordre : `woocommerce.min.css`
 * est charge **apres** les feuilles du theme (verifie dans
 * `document.styleSheets` : 06-tunnel en position 27, woocommerce.min en 30).
 * Sa regle `.woocommerce ul.product_list_widget` pese donc exactement le meme
 * poids que `body.cp .cp-mini__liste` — deux classes et un element — et
 * l'emporte au departage par l'ordre. Il faut une classe de plus, pas une
 * ligne de plus.
 *
 * La classe `product_list_widget` doit rester sur la liste : des extensions
 * s'y accrochent. On ne la retire pas, on passe devant.
 */
body.cp .cp-mini .cp-mini__liste {
  list-style: none;
  margin: 0;
  padding: 0 var(--cp-mini-marge);
  max-height: min(46vh, 336px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cp-trait-fort) transparent;
}
/*
 * Meme piege d'ordre que la liste ci-dessus, en plus serre :
 * `.woocommerce .widget_shopping_cart .cart_list li` pose `padding: 0`, et
 * `.woocommerce ul.product_list_widget li` un `padding-left: 94px` prevu
 * pour une vignette en absolu que nous n'employons pas. Trois classes et un
 * element : il en faut quatre pour passer devant. Sans quoi les articles ne
 * respirent ni a gauche, ni en haut.
 */
body.cp .cp-mini .cp-mini__liste .cp-mini__ligne {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--cp-e-3);
  align-items: center;
  padding: var(--cp-e-3) 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--cp-trait);
  min-height: 0;
}
body.cp .cp-mini .cp-mini__liste > li:last-child { border-bottom: 0; }

body.cp .cp-mini__vignette {
  position: relative;       /* voir la note sur le positionnement, ci-dessous */
  display: block;
  width: 56px;
  height: 56px;
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-sm);
  overflow: hidden;
  background: var(--cp-fond);
}
/*
 * OceanWP positionne les vignettes des widgets de produits en absolu :
 * `.woocommerce ul.product_list_widget li img { position:absolute; top:10px;
 * left:0; width:80px; height:80px }`. Notre liste porte cette classe — il faut
 * la garder, des extensions s'y accrochent — et l'image s'échappait donc de sa
 * case pour se caler sur la ligne entière, par-dessus le nom du produit.
 *
 * Le sélecteur reprend `.cp-mini__liste` uniquement pour la spécificité : sans
 * lui, la règle d'OceanWP compte un élément de plus et l'emporte.
 */
body.cp .cp-mini__liste .cp-mini__vignette img {
  position: static;
  display: block;
  float: none;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

body.cp .cp-mini__corps { display: grid; gap: 0.15rem; min-width: 0; }
body.cp .cp-mini__nom {
  font-family: var(--cp-font-titre);
  font-size: var(--cp-t-s);
  line-height: 1.3;
  color: var(--cp-encre);
  text-decoration: none;
  text-transform: none;
}
body.cp .cp-mini__nom:hover { color: var(--cp-bordeaux); }

/* Contenance et variations, telles que WooCommerce les écrit. */
body.cp .cp-mini__corps dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35em;
  margin: 0;
  font-size: var(--cp-t-xs);
  color: var(--cp-texte-doux);
}
body.cp .cp-mini__corps dl.variation dt,
body.cp .cp-mini__corps dl.variation dd { margin: 0; padding: 0; float: none; font-weight: 400; }
body.cp .cp-mini__corps dl.variation dd p { margin: 0; }

body.cp .cp-mini__detail {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin: 0.1rem 0 0;
  font-size: var(--cp-t-xs);
  color: var(--cp-texte-doux);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
body.cp .cp-mini__qte { font-weight: 600; color: var(--cp-texte); }
body.cp .cp-mini__x { opacity: 0.6; }

body.cp .cp-mini__fin {
  display: flex;
  align-items: center;
  gap: var(--cp-e-2);
}
body.cp .cp-mini__total {
  font-size: var(--cp-t-s);
  font-weight: 600;
  color: var(--cp-encre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La croix de suppression : chez Elementor elle était vide (sa croix vient
   d'une feuille du widget Menu Cart, absente ici) — on ne pouvait retirer un
   article que depuis la page panier. Elle est rétablie en clair. */
/*
 * Même piège que la vignette : OceanWP place ce lien en absolu
 * (`.woocommerce ul.product_list_widget li a.remove { position:absolute;
 * top:50%; right:0 }`), et il venait se poser sur le total de la ligne. Le
 * sélecteur est allongé pour passer devant.
 */
body.cp .cp-mini__liste .cp-mini__fin .cp-mini__retirer {
  position: static;
  top: auto;
  right: auto;
  width: 28px;
  height: 28px;
  min-width: 28px;
  aspect-ratio: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cp-texte-doux);
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--cp-vite) var(--cp-courbe),
              color var(--cp-vite) var(--cp-courbe);
}
/*
 * LA CROIX QUI N'ETAIT PAS AU MILIEU — mesure du 4 septembre 2026.
 *
 * OceanWP pose sur ce lien un pseudo-element de degagement vide
 * (`content: ""`). Tant que le bouton etait en `display: grid`, ce
 * pseudo-element comptait comme un second element de grille : la grille
 * passait a deux rangees — mesurees a 22,39px puis 5,61px dans un bouton de
 * 28px — et la croix, logee dans la premiere, se retrouvait 3,2px au-dessus
 * du centre. C'est tout le defaut : le rond etait rond, c'est son contenu
 * qui ne l'etait pas.
 *
 * On supprime le pseudo-element, et le lien passe en `inline-flex` : un
 * enfant unique de dimensions fixes s'y centre sans dependre des metriques
 * de la police.
 */
body.cp .cp-mini__liste .cp-mini__fin .cp-mini__retirer::before,
body.cp .cp-mini__liste .cp-mini__fin .cp-mini__retirer::after { content: none; }
body.cp .cp-mini__liste .cp-mini__fin .cp-mini__retirer:hover,
body.cp .cp-mini__liste .cp-mini__fin .cp-mini__retirer:focus-visible {
  background: var(--cp-f-flamboyant-voile);
  color: var(--cp-f-flamboyant-texte);
}

/* 4.4 — LE PIED
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. JAUGE DE LIVRAISON GRATUITE

   La boutique annonce déjà « Livraison gratuite à La Réunion à partir de
   80 euros d'achat » dans sa barre haute, et ne le rappelle nulle part
   pendant l'achat. Cette jauge le rappelle là où la décision se prend :
   dans le panier et dans le mini-panier.

   Le remplissage est piloté par une variable `--cp-jauge` (0 à 1) posée en
   ligne par le PHP. Aucune largeur n'est calculée en JavaScript.
   -------------------------------------------------------------------------- */

body.cp .cp-jauge {
  --cp-jauge: 0;
  display: grid;
  gap: var(--cp-e-3);
  background: var(--cp-blanc);
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-md);
  padding: var(--cp-e-4) var(--cp-e-5);
  margin-bottom: var(--cp-e-5);
}
body.cp .cp-jauge__texte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  color: var(--cp-texte);
  margin: 0;
}
body.cp .cp-jauge__texte b { color: var(--cp-encre); font-weight: 600; font-variant-numeric: tabular-nums; }

body.cp .cp-jauge__piste {
  position: relative;
  height: 8px;
  border-radius: var(--cp-r-pill);
  background: var(--cp-gris-voile);
  overflow: hidden;
}
body.cp .cp-jauge__part {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cp-accent), var(--cp-bordeaux));
  transform: scaleX(var(--cp-jauge));
  transform-origin: left;
  transition: transform 900ms var(--cp-courbe);
}
/* Seuil atteint : la jauge passe au vert canne et le texte change de ton. */
body.cp .cp-jauge.est-atteinte .cp-jauge__part {
  background: linear-gradient(90deg, var(--cp-f-canne), var(--cp-f-lagon));
}
body.cp .cp-jauge.est-atteinte .cp-jauge__texte { color: var(--cp-f-canne-texte); }
body.cp .cp-jauge.est-atteinte .cp-jauge__texte b { color: var(--cp-f-canne-texte); }

/* Le reflet ne parcourt la jauge que tant que le seuil n'est pas atteint :
   une animation qui tourne en permanence sur une tâche accomplie est du
   bruit. Elle s'arrête aussi si le visiteur a demandé moins d'animations. */
body.cp .cp-jauge:not(.est-atteinte) .cp-jauge__part::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: cp-reflet 2.4s var(--cp-courbe) infinite;
}
@keyframes cp-reflet { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

body.cp .cp-mini__pied {
  display: grid;
  gap: var(--cp-e-3);
  padding: var(--cp-mini-marge);
  background: var(--cp-fond);
  border-top: 1px solid var(--cp-trait);
}
/* La jauge de livraison offerte s'y insère : dans le panneau elle se resserre,
   elle n'a pas à y reprendre le cadre qu'elle porte sur la page panier. */
body.cp .cp-mini__pied .cp-jauge {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  gap: var(--cp-e-2);
}
body.cp .cp-mini__pied .cp-jauge__texte { font-size: var(--cp-t-xs); }

body.cp .cp-mini__soustotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cp-e-3);
  margin: 0;
  padding: var(--cp-e-3) 0 0;
  border-top: 1px solid var(--cp-trait);
  background: none;                  /* OceanWP pose un fond gris sur `.total` */
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  color: var(--cp-texte);
}
body.cp .cp-mini__soustotal span {
  float: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  color: var(--cp-texte-doux);
}
body.cp .cp-mini__soustotal b {
  font-size: var(--cp-t-l);
  font-weight: 600;
  color: var(--cp-encre);
  font-variant-numeric: tabular-nums;
}

body.cp .cp-mini__actions { display: grid; gap: var(--cp-e-2); justify-items: center; }
body.cp .cp-mini__lien {
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-xs);
  color: var(--cp-texte-doux);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
body.cp .cp-mini__lien:hover { color: var(--cp-bordeaux); }

/* 4.5 — PANIER VIDE
   Le message d'origine — « Aucun produit dans le panier. » — est un constat
   sans issue. On y ajoute la seule chose utile : par où commencer.
   -------------------------------------------------------------------------- */

body.cp .cp-mini__vide {
  display: grid;
  justify-items: center;
  gap: var(--cp-e-2);
  text-align: center;
  padding: var(--cp-e-6) var(--cp-e-5);
  margin: 0;
}
body.cp .cp-mini__vide-icone {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cp-gris-voile);
  color: var(--cp-bordeaux);
  margin-bottom: var(--cp-e-1);
}
body.cp .cp-mini__vide-icone svg { width: 22px; height: 22px; }
body.cp .cp-mini__vide-titre {
  font-family: var(--cp-font-titre);
  font-size: var(--cp-t-l);
  color: var(--cp-encre);
  margin: 0;
}
body.cp .cp-mini__vide-texte {
  font-size: var(--cp-t-xs);
  color: var(--cp-texte-doux);
  line-height: 1.5;
  margin: 0 0 var(--cp-e-2);
  max-width: 32ch;
}

/* 4.6 — SOUS 480 px
   Le panneau déborderait de l'écran s'il restait accroché à droite du lien.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  body.cp .current-shop-items-dropdown {
    position: fixed;
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: none;
  }
  body.cp .cp-mini__liste { max-height: 40vh; }
}

/* --------------------------------------------------------------------------
   5. RECHERCHE
   -------------------------------------------------------------------------- */

body.cp #searchform-dropdown,
body.cp .header-searchform-wrap {
  background: var(--cp-blanc);
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-md);
  box-shadow: var(--cp-ombre-2);
}
body.cp .search-toggle-li a,
body.cp #icon-search { color: var(--cp-texte); }

/* --------------------------------------------------------------------------
   6. FIL D'ARIANE
   Présent sur la catégorie, la fiche produit et le panier, absent ailleurs.
   Rendu en chasse fixe, discret, avec la famille en couleur quand on est
   dans une catégorie.
   -------------------------------------------------------------------------- */

body.cp .site-breadcrumbs,
body.cp .woocommerce-breadcrumb {
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-xs);
  letter-spacing: 0.03em;
  color: var(--cp-texte-doux);
  padding: var(--cp-e-4) 0;
  margin: 0;
}
body.cp .woocommerce-breadcrumb a { color: var(--cp-texte-doux); text-decoration: none; }
body.cp .woocommerce-breadcrumb a:hover { color: var(--cp-bordeaux); text-decoration: underline; }
body.cp .woocommerce-breadcrumb .breadcrumb-sep { margin-inline: 0.45em; opacity: 0.55; }

/* --------------------------------------------------------------------------
   LE SOUS-MENU DES FAMILLES

   Ajoute au menu par `cp_eshop_sous_menu_familles()` : « E-shop » ouvre les
   huit familles au lieu de mener a soixante produits d'affilee.

   Deux corrections par rapport au sous-menu par defaut d'OceanWP :
   la capitalisation forcee, qui ecrivait « Les Coffrets De COCO » et
   « Specialites Artisanales » — la casse saisie par la cliente est la bonne,
   ce n'est pas au theme d'en decider ; et la pastille de couleur, qui fait du
   sous-menu le meme objet que le bandeau des familles de la boutique.
   -------------------------------------------------------------------------- */

/* Le selecteur est long a dessein. `.dropdown-menu ul li a.menu-link` pese
   (0,3,3) dans `oceanwp/style.min.css` : une regle en `body.cp .cp-menu-famille
   > a` (0,2,2) ne passe pas devant, et la capitalisation forcee restait —
   « Les Coffrets De COCO ». Compter les classes de l'adversaire avant
   d'ecrire, plutot que constater a l'ecran. */
body.cp .dropdown-menu ul li.cp-menu-famille > a.menu-link {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-transform: none;
  letter-spacing: 0;
}
body.cp .dropdown-menu ul li.cp-menu-famille > a.menu-link::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cp-famille, var(--cp-bordeaux));
  flex: none;
  transition: transform var(--cp-vite) var(--cp-courbe);
}
body.cp .dropdown-menu ul li.cp-menu-famille > a.menu-link:hover::before { transform: scale(1.35); }

/* --------------------------------------------------------------------------
   7. LA BARRE D'OUTILS ET LES FILTRES — DEMENAGES

   Ce fichier portait, depuis aout 2026, trois composants de la boutique :
   `.cp-barre-boutique`, les surcharges de `.woocommerce-ordering` et une
   barre de puces `.cp-filtres`. Tous les trois sont partis dans
   `10-boutique.css` le 5 septembre 2026, avec le reste de la refonte du
   e-shop, et ils ont ete SUPPRIMES ici plutot que laisses en double.

   Une raison precise, decouverte a la mesure : le nouveau panneau lateral
   s'appelle lui aussi `.cp-filtres`, et l'ancienne regle
   `.cp-filtres a::before` posait une pastille ronde devant CHAQUE lien du
   panneau — y compris les fourchettes de prix et les contenances, qui n'ont
   pas de famille. Deux composants differents portant le meme nom de classe
   dans deux feuilles chargees ensemble : le defaut ne se voyait qu'a l'ecran,
   sous la forme d'une puce bordeaux inexpliquee.

   Les anciennes regles ne servaient a rien par ailleurs : aucun balisage du
   site n'a jamais produit `.cp-barre-boutique` ni `.cp-filtres` en barre de
   puces — ils venaient de la maquette de demonstration, ou ils etaient ecrits
   a la main.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8. INTRODUCTION DE CATEGORIE — DEMENAGEE elle aussi dans 10-boutique.css,
   ou elle devient l'en-tete de la famille et prend sa teinte.
   -------------------------------------------------------------------------- */