/* =====================================================================
   YouTips · Boutique v2 (/produits/, page 1808171) — même langage que l'accueil v2
   S'appuie sur accueil-v2.css (classes .ya2-*), chargé aussi sur cette page.
   ===================================================================== */

/* --- Hero : texte à gauche, éventail de produits à droite --- */
html body .ya2 .ysh2-hero{ align-items:center; min-height:min(88vh,780px); padding:120px max(40px, calc((100% - 1120px) / 2)) 120px !important; }
html body .ya2 .ysh2-halo{ position:absolute; z-index:0; right:-10%; top:50%; width:820px; height:820px; transform:translateY(-50%); border-radius:50%; background:conic-gradient(from 180deg,rgba(255,55,95,.28),rgba(255,159,10,.22),rgba(50,215,75,.18),rgba(10,132,255,.30),rgba(191,90,242,.28),rgba(255,55,95,.28)); filter:blur(110px); pointer-events:none; }
html body .ya2 .ysh2-hero::before{ display:none; }
html body .ya2 .ysh2-hero-in{ z-index:2; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:48px; }
html body .ya2 .ysh2-hero-txt{ display:flex; flex-direction:column; gap:28px; }
html body .ya2 .ysh2-h1{ font-size:80px !important; }
html body .ya2 .ysh-fan{ position:relative; height:440px; }
html body .ya2 .ysh-fan-c{ --r:calc((var(--i) - 1.5) * 7deg); --x:calc((var(--i) - 1.5) * 92px); position:absolute; top:50%; left:50%; width:230px; margin:-150px 0 0 -115px; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:#FFFFFF; color:#050505 !important; text-decoration:none !important; box-shadow:0 22px 50px rgba(0,0,0,.55); transform:translateX(var(--x)) translateY(calc(var(--i) * 10px - 15px)) rotate(var(--r)); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; z-index:calc(10 - var(--i)); }
html body .ya2 .ysh-fan:hover .ysh-fan-c{ --x:calc((var(--i) - 1.5) * 120px); }
html body .ya2 .ysh-fan-c:hover, html body .ya2 .ysh-fan-c:focus-visible{ z-index:20; transform:translateX(var(--x)) translateY(-26px) rotate(0) scale(1.06); box-shadow:0 30px 70px rgba(0,0,0,.6); }
html body .ya2 .ysh-fan-c:focus-visible{ outline:3px solid #8AB8FF; outline-offset:4px; }
html body .ya2 .ysh-fan-img{ display:block; aspect-ratio:16 / 10; overflow:hidden; background:#121215; }
html body .ya2 .ysh-fan-img img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0 !important; }
html body .ya2 .ysh-fan-b{ display:flex; flex-direction:column; gap:8px; padding:14px 16px 16px; }
html body .ya2 .ysh-fan-t{ font-size:15px; font-weight:700; line-height:1.3; color:#050505; }
html body .ya2 .ysh-fan-p{ align-self:flex-start; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:700; color:#FFFFFF; }
html body .ya2 .ysh-fan .ya2-t-rouge .ysh-fan-p, html body .ya2 .ysh-fan-c.ya2-t-rouge .ysh-fan-p{ background:var(--ya2-rouge); }
html body .ya2 .ysh-fan-c.ya2-t-ocre .ysh-fan-p{ background:var(--ya2-ocre); }
html body .ya2 .ysh-fan-c.ya2-t-violet .ysh-fan-p{ background:var(--ya2-violet); }
html body .ya2 .ysh-fan-c.ya2-t-bleu .ysh-fan-p{ background:var(--ya2-bleu); }

/* --- À la une : rangée photo + promesse sur fond clair --- */
html body .ya2 #ysh-une .ya2-promesse a{ color:var(--yj-text,#050505) !important; }
html body .ya2 #ysh-une .ya2-lane-desc{ color:var(--yj-text2,#4A4E55); }
html body .ya2 #ysh-une .ya2-lane-visuel{ box-shadow:0 18px 40px rgba(11,13,18,.14); }
html body .ya2 #ysh-une .ya2-lane-visuel .ya2-lane-photo{ aspect-ratio:16 / 9; }

/* --- Grille des produits --- */
html body #yt-boutique #ysh-produits.ysh-sec{ padding-top:140px !important; padding-bottom:140px !important; }
html body #yt-boutique #ysh-produits h2.ysh-h2{ max-width:900px !important; margin-bottom:20px !important; font-size:64px !important; line-height:1.05 !important; letter-spacing:-0.035em !important; }
html body #yt-boutique #ysh-produits h2.ysh-h2 .ysh-mute{ color:#666B73; }
html.yj-ok.yj-isdark body #yt-boutique #ysh-produits h2.ysh-h2 .ysh-mute{ color:#9AA0A8; }
html body #yt-boutique #ysh-produits p.ysh-chapo{ font-size:21px !important; line-height:1.55 !important; margin-bottom:48px !important; }
html body #yt-boutique #ysh-produits .fct-products-container{ gap:28px 24px !important; padding-top:12px !important; }
html body #yt-boutique #ysh-produits .fct-product-card{ border:0 !important; border-top:6px solid #8D3A34 !important; border-radius:12px !important; box-shadow:0 10px 30px rgba(11,13,18,.10) !important; transform:rotate(-.8deg) !important; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease !important; }
html body #yt-boutique #ysh-produits .fct-product-card:nth-child(4n+2){ border-top-color:#7F4A22 !important; transform:rotate(.7deg) !important; }
html body #yt-boutique #ysh-produits .fct-product-card:nth-child(4n+3){ border-top-color:#664492 !important; transform:rotate(-.4deg) !important; }
html body #yt-boutique #ysh-produits .fct-product-card:nth-child(4n){ border-top-color:#124CA3 !important; transform:rotate(1deg) !important; }
html body #yt-boutique #ysh-produits .fct-product-card:hover, html body #yt-boutique #ysh-produits .fct-product-card:focus-within{ transform:rotate(0) translateY(-6px) !important; box-shadow:0 20px 44px rgba(11,13,18,.18) !important; }
html body #yt-boutique #ysh-produits h3.fct-product-card-title{ font-size:19px !important; font-weight:700 !important; }

/* --- Étapes : trois colonnes --- */
html body .ya2 .ysh-etapes-3{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:32px !important; }
html body .ya2 .ysh-etapes-3::before{ background:linear-gradient(90deg,#C45048,#D07838,#7850AC) !important; }
html body .ya2 .ysh-lien-d{ color:#8AB8FF !important; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* --- Dernier appel --- */
html body .ya2 .ysh-more{ font-size:15px; color:rgba(255,255,255,.75); }
html body .ya2 .ysh-more a{ color:#8AB8FF !important; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:1024px){
  html body .ya2 .ysh2-hero-in{ grid-template-columns:1fr; }
  html body .ya2 .ysh2-h1{ font-size:64px !important; }
  html body .ya2 .ysh-fan{ height:380px; }
  html body #yt-boutique #ysh-produits h2.ysh-h2{ font-size:52px !important; }
}
@media (max-width:760px){
  html body .ya2 .ysh2-hero{ min-height:0; padding:72px 20px 56px !important; }
  html body .ya2 .ysh2-h1{ font-size:44px !important; }
  html body .ya2 .ysh-fan{ height:300px; margin-top:8px; }
  html body .ya2 .ysh-fan-c{ --x:calc((var(--i) - 1.5) * 46px); width:170px; margin:-110px 0 0 -85px; }
  html body .ya2 .ysh-fan:hover .ysh-fan-c{ --x:calc((var(--i) - 1.5) * 46px); }
  html body .ya2 .ysh-fan-t{ font-size:13px; }
  html body .ya2 .ysh2-halo{ width:480px; height:480px; right:-40%; }
  html body #yt-boutique #ysh-produits.ysh-sec{ padding-top:88px !important; padding-bottom:88px !important; }
  html body #yt-boutique #ysh-produits h2.ysh-h2{ font-size:38px !important; }
  html body #yt-boutique #ysh-produits p.ysh-chapo{ font-size:18px !important; }
  html body .ya2 .ysh-etapes-3{ grid-template-columns:1fr !important; gap:28px !important; }
}
@media (prefers-reduced-motion:reduce){
  html body .ya2 .ysh-fan-c{ transition:none; }
  html body #yt-boutique #ysh-produits .fct-product-card{ transition:none !important; }
}
/* éventail : image entière (le titre est dans l'image), éventail resserré sur mobile */
html body .ya2 .ysh-fan-img{ aspect-ratio:16 / 9; }
@media (max-width:760px){
  html body .ya2 .ysh-fan{ height:260px; }
  html body .ya2 .ysh-fan-c, html body .ya2 .ysh-fan:hover .ysh-fan-c{ --x:calc((var(--i) - 1.5) * 30px); width:150px; margin:-95px 0 0 -75px; }
  html body .ya2 .ysh-fan-b{ padding:10px 12px 12px; gap:6px; }
}