/* ==========================================================================
   Vitrine (inc/vitrine.php, assets/js/vitrine.js) : grain des aplats, cartes vivantes, coloris des
   cartes, carte du Pack, onglets illustrés, filigrane du catalogue, courbes des sections bleu nuit,
   rebond de l'icône du panier. Survols réservés à la souris ; mouvements coupés si l'appareil
   demande moins d'animations.
   ========================================================================== */

:root{
  /* grain très fin, posé sur les aplats : points sombres sur fond clair, clairs sur fond nuit */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .09 0 0 0 0 .29 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-clair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* courbes : la zone visible (noire) est sous la vague du haut et au-dessus de celle du bas */
  --vague-haut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V22C200 4 420 0 640 10s440 30 640 22c70-3 120-10 160-16V48Z'/%3E%3C/svg%3E");
  --vague-bas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0V26C200 44 420 48 640 38s440-30 640-22c70 3 120 10 160 16V0Z'/%3E%3C/svg%3E");
  --vague-hauteur:clamp(18px,3vw,44px);   /* PIÈGE : ne pas nommer « --courbe », c'est la courbe des transitions (base.css) */
}

/* ---------- Grain des aplats ---------- */
.grille-produits .wc-block-product,.fiche-bref{background-image:var(--grain)}
.page-catalogue .catalogue-garanties,.fiche-reassurance,.pied{background-image:var(--grain-clair)}
section.signature-nuit{background-image:var(--grain-clair)}

/* ---------- Courbes : haut du pied de page, haut et bas des sections bleu nuit des fiches ---------- */
.pied{border-top-left-radius:0;border-top-right-radius:0;
  -webkit-mask:var(--vague-haut) top/100% var(--vague-hauteur) no-repeat,linear-gradient(#000 0 0) bottom/100% calc(100% - var(--vague-hauteur) + 1px) no-repeat;
          mask:var(--vague-haut) top/100% var(--vague-hauteur) no-repeat,linear-gradient(#000 0 0) bottom/100% calc(100% - var(--vague-hauteur) + 1px) no-repeat}
section.exploration.signature-nuit{
  -webkit-mask:var(--vague-haut) top/100% var(--vague-hauteur) no-repeat,linear-gradient(#000 0 0) center/100% calc(100% - 2 * var(--vague-hauteur) + 2px) no-repeat,var(--vague-bas) bottom/100% var(--vague-hauteur) no-repeat;
          mask:var(--vague-haut) top/100% var(--vague-hauteur) no-repeat,linear-gradient(#000 0 0) center/100% calc(100% - 2 * var(--vague-hauteur) + 2px) no-repeat,var(--vague-bas) bottom/100% var(--vague-hauteur) no-repeat}

/* ---------- Cartes vivantes : halo derrière le produit, image qui monte (souris) ---------- */
.grille-produits .carte-image{position:relative;isolation:isolate}
.grille-produits .carte-image::before{content:"";position:absolute;z-index:-1;inset:12% 10% 4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#fff 0%,#ffffffa6 45%,transparent 100%);opacity:.55;transform:scale(.85);transition:opacity .6s var(--courbe),transform .6s var(--courbe)}
@media (hover:hover){
  .grille-produits .wc-block-product:hover .carte-image::before{opacity:1;transform:scale(1.05)}
  .grille-produits .wc-block-product:hover .carte-image img{transform:translateY(-8px) scale(1.03)}
}

/* ---------- Coloris d'une carte : survol ou toucher d'un rond = photo de ce coloris ---------- */
.carte-coloris{display:flex;justify-content:center;gap:2px;margin:4px 0 0}
.carte-coloris__ronds{display:inline-flex;gap:6px}
.carte-coloris__choix{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.carte-coloris__rond{display:block;width:16px;height:16px;border-radius:50%;background:var(--pastille);box-shadow:inset 0 0 0 1px rgba(18,23,74,.18),0 0 0 2px #fff;transition:box-shadow var(--duree-interface) var(--courbe)}
.carte-coloris__choix[aria-pressed="true"] .carte-coloris__rond{box-shadow:inset 0 0 0 1px rgba(18,23,74,.18),0 0 0 2px #fff,0 0 0 3.5px var(--nuit)}
.carte-coloris__choix:focus-visible{outline:2px solid var(--nuit);outline-offset:1px}
.est-epuise>.carte-coloris__rond,.carte-coloris__rond.est-epuise{opacity:.45}

/* ---------- Carte du Pack ---------- */
.carte-pack{grid-column:span 2;min-width:0;list-style:none}
.carte-pack__lien{--halo:#f4bccb;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:8px 22px;height:100%;padding:22px 26px;border-radius:var(--rayon-grand);
  background:var(--grain-clair),radial-gradient(ellipse 70% 90% at 25% 50%,#2a3170 0%,transparent 70%),var(--nuit);color:#fff;text-decoration:none;
  transition:transform .9s cubic-bezier(.22,.61,.36,1),box-shadow .9s cubic-bezier(.22,.61,.36,1)}
.carte-pack__visuel{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}
.carte-pack__visuel::before{content:"";position:absolute;z-index:-1;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,#b9a6f240,transparent);transition:opacity 1s var(--courbe),transform 1.2s cubic-bezier(.22,.61,.36,1)}
.carte-pack__img{width:47%;max-width:250px;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 18px 24px #00000059);transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.carte-pack__plus{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffffff1f;font:300 22px/1 var(--police-texte);transition:transform 1s cubic-bezier(.22,.61,.36,1),background .5s}
.carte-pack__corps{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.carte-pack .carte-cat{color:var(--rose)}
.carte-pack .carte-titre{margin:0;color:#fff}
.carte-pack__accroche{font-size:16px;line-height:1.4;color:#eceaf7}
.carte-pack__detail{font-size:14px;color:#c9cce4}
.carte-pack__atouts{display:flex;flex-wrap:wrap;gap:6px 14px;margin:4px 0 0;padding:0;list-style:none}
.carte-pack__atouts li{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#fff}
.carte-pack__atouts li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%2312174A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.carte-pack__coloris{display:flex;align-items:center;gap:10px;font-size:14px;color:#d9dcef}
.carte-pack__coloris .carte-coloris__rond{box-shadow:inset 0 0 0 1px #ffffff40,0 0 0 2px #12174a}
.carte-pack__achat{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:6px}
.carte-pack .carte-prix{display:flex;align-items:baseline;gap:8px;font-size:22px;font-weight:600;color:#fff}
.carte-pack .carte-prix del{font-size:15px;font-weight:500;color:#c3c7e2}
.carte-pack .carte-prix ins{color:#fff;text-decoration:none}
.carte-pack__eco{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:var(--rose);color:var(--nuit);font-size:13px;font-weight:600}
.carte-pack__eco-montant{font:600 19px/1 var(--police-titres)}
.carte-pack__eco-montant .woocommerce-Price-amount{font:inherit}
.carte-pack__bouton{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:10px;padding:0 24px;border-radius:var(--rayon-bouton);background:#fff;color:var(--nuit);font-size:15px;font-weight:600;transition:background .3s}
.carte-pack__lien:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
/* étoiles qui scintillent dans le fond (réglage « Étoiles dans la carte du Pack ») */
.carte-pack__ciel{position:absolute;z-index:-1;inset:0;pointer-events:none}
.carte-pack__ciel::before,.carte-pack__ciel::after{content:"";position:absolute;inset:0;background-repeat:no-repeat;opacity:.55}
.carte-pack__ciel::before{background-image:radial-gradient(1.5px 1.5px at 8% 18%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 72%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 41% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 58% 86%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 76% 22%,#fff 60%,transparent),radial-gradient(1px 1px at 92% 64%,#fff 60%,transparent)}
.carte-pack__ciel::after{background-image:radial-gradient(1px 1px at 14% 44%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 33% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 50% 40%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 67% 8%,#fff 60%,transparent),radial-gradient(1px 1px at 84% 46%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 96% 90%,#fff 60%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .carte-pack__ciel::before{animation:pack-scintille 4.5s ease-in-out infinite alternate}
  .carte-pack__ciel::after{animation:pack-scintille 5.5s ease-in-out 1.5s infinite alternate-reverse}
  @keyframes pack-scintille{from{opacity:.2}to{opacity:.85}}
}
@media (hover:hover){
  /* survol (demandes du client du 18-10) : un seul mouvement, les deux produits qui se rapprochent lentement.
     La carte ne se soulève plus, le halo ne grandit plus, aucun reflet ne la traverse ; seuls la lueur autour
     de la carte et le bouton s'éclairent (rien ne bouge). */
  .carte-pack__lien:hover{box-shadow:0 30px 60px -34px #12174ab3,0 0 50px -16px color-mix(in srgb,var(--halo) 45%,transparent)}
  .carte-pack__lien:hover .carte-pack__img:first-child{transform:translateX(5px)}
  .carte-pack__lien:hover .carte-pack__img:last-child{transform:translateX(-5px)}
  .carte-pack__lien:hover .carte-pack__ciel::before,.carte-pack__lien:hover .carte-pack__ciel::after{opacity:1}
  .carte-pack__lien:hover .carte-pack__bouton{background:var(--surface-rose)}
}
@media (prefers-reduced-motion:reduce){
  .carte-pack__lien,.carte-pack__img,.carte-pack__plus,.carte-pack__visuel::before,.grille-produits .carte-image::before,.carte-coloris__rond{transition:none}
  .carte-pack__lien:hover,.carte-pack__lien:hover .carte-pack__img,.carte-pack__lien:hover .carte-pack__plus{transform:none}
}
/* Grands écrans : la carte prend la hauteur des cartes voisines (photo carrée + texte). PIÈGE (18-10) : les deux
   photos restaient à 170 px dans une carte de 820 × 590 (22 % de la carte remplie) : composition agrandie,
   l'oreiller derrière, les bouchons devant qui le chevauchent, texte plus grand. */
@media (min-width:641px) and (max-width:1099px){
  /* tablette : l'oreiller plus grand, les bouchons le chevauchent un peu (plus de place pour les photos) */
  .carte-pack__img{max-width:none}
  .carte-pack__img:first-child{width:62%}
  .carte-pack__img:last-child{width:46%;margin-left:-14%;position:relative;z-index:1}
  .carte-pack__plus{display:none}
  .carte-pack .carte-titre{font-size:clamp(28px,3.4vw,36px)}
}
@media (min-width:1100px){
  .carte-pack__lien{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px 34px;padding:34px 40px}
  .carte-pack__visuel{align-self:stretch;display:block;min-height:300px}
  .carte-pack__visuel::before{inset:2% 0}
  .carte-pack__img{position:absolute;max-width:none}
  .carte-pack__img:first-child{width:96%;left:0;top:50%;margin-top:-56%}
  .carte-pack__img:last-child{width:52%;right:-2%;top:50%;margin-top:-8%}
  .carte-pack__plus{display:none}   /* les deux produits se chevauchent : le « + » est inutile */
  .carte-pack__corps{gap:10px}
  .carte-pack .carte-titre{font-size:clamp(34px,2.6vw,44px);line-height:1.05}
  .carte-pack__accroche{font-size:18px}
  .carte-pack__detail{font-size:15px}
  .carte-pack__atouts{gap:8px 18px}
  .carte-pack__atouts li,.carte-pack__coloris{font-size:15px}
  .carte-pack .carte-prix{font-size:28px}
  .carte-pack .carte-prix del{font-size:17px}
  .carte-pack__eco{padding:7px 14px;font-size:14px}
  .carte-pack__eco-montant{font-size:21px}
  .carte-pack__bouton{min-height:52px;padding:0 30px;font-size:16px}
}
@media (max-width:640px){
  .carte-pack__lien{grid-template-columns:1fr;justify-items:center;gap:6px;padding:18px 16px 20px;text-align:center}
  .carte-pack__corps{align-items:center}
  .carte-pack__img{width:40%;max-width:150px}
  .carte-pack__accroche{font-size:15px}
  .carte-pack__atouts,.carte-pack__achat{justify-content:center}
  .carte-pack__atouts li,.carte-pack__detail,.carte-pack__coloris{font-size:13px}
  .carte-pack__bouton{width:100%;min-height:44px}
}

/* ---------- Onglets du catalogue : une petite photo avant le nom ---------- */
.boutique-onglets .onglet>.wp-block-button__link{display:inline-flex;align-items:center;gap:8px}
.boutique-onglets .onglet:has(.onglet__img)>.wp-block-button__link{padding-left:6px}
.onglet__img{flex:none;width:34px;height:34px;border-radius:50%;object-fit:contain;background:#f1eff6}
.boutique-onglets .onglet.est-actif .onglet__img{background:#ffffff26}

/* ---------- Filigrane derrière le titre du catalogue ---------- */
.page-catalogue .catalogue-entete{overflow:hidden}
.page-catalogue .catalogue-titre{position:relative;isolation:isolate}
.catalogue-filigrane{position:absolute;z-index:-1;right:0;top:50%;transform:translateY(-50%);pointer-events:none;user-select:none;white-space:nowrap;
  font:300 2.1em/1 var(--police-titres);letter-spacing:.08em;color:transparent;-webkit-text-stroke:1px #12174a1a;
  background:linear-gradient(100deg,#b9a6f238,#f4bccb33);-webkit-background-clip:text;background-clip:text}

/* ---------- Icône du panier : petit rebond quand un article arrive (vitrine.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  .entete-panier.est-rebond .wc-block-mini-cart__icon{animation:panier-rebond .6s var(--courbe)}
  .entete-panier.est-rebond .wc-block-mini-cart__badge{animation:panier-pastille .6s var(--courbe)}
  /* propriétés translate et scale : le placement de WooCommerce (transform) reste intact */
  @keyframes panier-rebond{0%,100%{translate:0;scale:1}30%{translate:0 -4px;scale:1.12}60%{translate:0 1px;scale:.96}}
  @keyframes panier-pastille{0%,100%{scale:1}40%{scale:1.35}}
}