/* ==========================================================================
   Collect Univers – nuages pastel qui flottent sur les pages
   --------------------------------------------------------------------------
   Les nuages (rose, bleu, jaune, comme dans le logo) sont placés au hasard par
   cu-nuages.js, derrière le contenu, et flottent doucement. Ils changent de place
   à chaque page. Les images sont dans assets/img/ (cu-nuage-*.svg, cu-etoile-*.svg).
   POUR RÉGLER : le nombre, la taille et la transparence se règlent en haut de
   cu-nuages.js. Ici : la vitesse (--cu-flotte).
   POUR LES RETIRER : supprimez les lignes « cu-nuages » dans head.tpl et
   layout-both-columns.tpl.
   ========================================================================== */
:root {
  --cu-flotte: 1;        /* 1 = vitesse normale, 2 = deux fois plus lent, .5 = deux fois plus vite */
}
body { position: relative; }

.cu-nuages {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.cu-nuages img {
  position: absolute;
  height: auto;
  max-width: none;
  opacity: var(--o, .8);
  user-select: none;
  -webkit-user-drag: none;
  animation: cu-flotte calc(var(--fd, 12s) * var(--cu-flotte)) ease-in-out var(--fdelay, 0s) infinite alternate;
  will-change: translate;
}
.cu-nuages img.cu-etoile {
  animation: cu-flotte calc(var(--fd, 12s) * var(--cu-flotte)) ease-in-out var(--fdelay, 0s) infinite alternate,
             cu-scintille 3.6s ease-in-out var(--fdelay, 0s) infinite alternate;
}
/* Un nuage qui éclate, tout en douceur : il gonfle un peu, s'efface, et laisse échapper quelques bulles */
.cu-nuages img.cu-eclate {
  animation: cu-flotte calc(var(--fd, 12s) * var(--cu-flotte)) ease-in-out var(--fdelay, 0s) infinite alternate,
             cu-eclate .5s ease-out forwards;
}
.cu-nuages img.cu-revient {
  animation: cu-flotte calc(var(--fd, 12s) * var(--cu-flotte)) ease-in-out var(--fdelay, 0s) infinite alternate,
             cu-revient 1s ease-out both;
}
.cu-nuages .cu-vol {
  position: absolute;
  max-width: none;
  opacity: 0;
  animation: cu-vol .95s ease-out forwards;
}
.cu-nuages .cu-bulle { border: 2px solid; border-radius: 50%; box-sizing: border-box; }
@keyframes cu-eclate {
  0%   { scale: 1; opacity: var(--o, .8); }
  45%  { scale: 1.1; opacity: var(--o, .8); }
  100% { scale: 1.22; opacity: 0; }
}
@keyframes cu-revient {
  from { scale: .88; opacity: 0; }
  to   { scale: 1; opacity: var(--o, .8); }
}
@keyframes cu-vol {
  0%   { translate: 0 0; scale: .5; opacity: .95; }
  100% { translate: var(--dx) var(--dy); scale: 1; opacity: 0; }
}
@keyframes cu-flotte {
  from { translate: 0 0; }
  50%  { translate: var(--fx, 14px) var(--fy, -12px); }
  to   { translate: calc(var(--fx, 14px) * -.7) calc(var(--fy, -12px) * -1); }
}
@keyframes cu-scintille {
  from { opacity: .45; scale: .85; rotate: -12deg; }
  to   { opacity: 1; scale: 1.1; rotate: 12deg; }
}
@media (prefers-reduced-motion: reduce) {
  .cu-nuages img, .cu-nuages img.cu-etoile { animation: none; }
}
@media print {
  .cu-nuages { display: none; }
}

/* Fonds blancs des cartes produit (catalogue) et de la photo produit rendus transparents,
   pour que les nuages restent visibles autour des produits. Pour les remettre : supprimez ce bloc. */
.product-miniature .thumbnail-container,
.product-miniature:hover .thumbnail-container,
.product-miniature .product-description,
.product-miniature .highlighted-informations,
.product-cover img,
img.js-qv-product-cover {
  background: transparent !important;
}

/* En-tête : fond blanc retiré (le bandeau noir Trustpilot est conservé) pour que les nuages restent
   visibles en haut des pages. Pour annuler : supprimez ce bloc. */
#header,
#header .elementor-element-5047e104 {
  background-color: transparent !important;
}
/* … mais le menu garde son fond blanc quand il reste collé en haut de l'écran pendant le défilement */
#header .elementor-element-5047e104.elementor-sticky--active,
#header .elementor-sticky--effects,
#header .elementor-sticky--active {
  background-color: #fff !important;
}

/* Page produit : la grande photo est un carré 800x800 avec des marges blanches de chaque côté
   (environ 12,3 %) ; on les rogne pour que les nuages restent visibles à côté de la photo. */
.product-cover img,
img.js-qv-product-cover,
.product-miniature .product-thumbnail img,
.product-miniature .thumbnail-container img.img-fluid {
  clip-path: inset(0 12.4% 0 12.2%);
}

/* Catalogue : aucun fond ni ombre blanche autour des cartes, même au survol */
.product-miniature .thumbnail-container,
.product-miniature .thumbnail-container:hover,
.product-miniature:hover .thumbnail-container,
.product-miniature:hover .product-description,
.product-miniature:hover .highlighted-informations,
.product-miniature .variant-links,
.product-miniature:hover .variant-links {
  background: transparent !important;
  box-shadow: none !important;
}