.liloou-shop-v2{
–pink:#f6a7c7;
–pink-dark:#db6fa2;
–purple:#8c70c7;
–lav:#eee6ff;
–mint:#def4e9;
–sky:#dff3f8;
–cream:#fff9f3;
–ink:#514764;
–line:rgba(140,112,199,.18);
max-width:1180px;
margin:0 auto 34px;
color:var(–ink);
font-family:inherit;
}
.liloou-shop-v2 *{box-sizing:border-box}
.liloou-shop-v2 a{text-decoration:none}
.ls-hero{
position:relative;
overflow:hidden;
padding:58px 36px 50px;
border-radius:32px;
text-align:center;
background:
radial-gradient(circle at 12% 22%,rgba(255,255,255,.9) 0 11px,transparent 12px),
radial-gradient(circle at 88% 25%,rgba(255,255,255,.72) 0 8px,transparent 9px),
radial-gradient(circle at 78% 80%,rgba(255,255,255,.55) 0 13px,transparent 14px),
linear-gradient(135deg,#ffe5f0 0%,#eee6ff 48%,#def6ef 100%);
border:1px solid var(–line);
box-shadow:0 18px 50px rgba(87,66,120,.12);
}
.ls-eyebrow{
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 14px;
border-radius:999px;
background:#fff;
color:var(–purple);
font-weight:800;
font-size:.82rem;
letter-spacing:.05em;
text-transform:uppercase;
box-shadow:0 6px 18px rgba(87,66,120,.08);
}
.ls-hero h1{
margin:16px 0 0;
color:#6d559d;
font-size:clamp(2.15rem,5vw,4.1rem);
line-height:1;
letter-spacing:-.04em;
}
.ls-hero p{
max-width:780px;
margin:19px auto 0;
line-height:1.75;
font-size:1.06rem;
}
.ls-actions{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:11px;
margin-top:26px;
}
.ls-btn{
display:inline-flex;
justify-content:center;
align-items:center;
padding:13px 19px;
border-radius:999px;
font-weight:800;
transition:.2s ease;
}
.ls-btn:hover{transform:translateY(-2px)}
.ls-primary{
color:#fff!important;
background:linear-gradient(135deg,var(–pink-dark),var(–purple));
box-shadow:0 9px 22px rgba(140,112,199,.23);
}
.ls-secondary{
color:var(–purple)!important;
background:#fff;
border:1px solid var(–line);
}
.ls-strip{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
margin:24px 0;
}
.ls-card{
padding:20px;
border-radius:22px;
background:#fff;
border:1px solid var(–line);
box-shadow:0 10px 26px rgba(87,66,120,.07);
}
.ls-icon{
display:grid;
place-items:center;
width:46px;height:46px;
border-radius:15px;
margin-bottom:11px;
font-size:1.25rem;
}
.ls-card:nth-child(1) .ls-icon{background:#ffe2ee}
.ls-card:nth-child(2) .ls-icon{background:#ebe3ff}
.ls-card:nth-child(3) .ls-icon{background:#dcf4e6}
.ls-card h3{margin:0 0 6px;color:#67538f;font-size:1.02rem}
.ls-card p{margin:0;line-height:1.55;font-size:.94rem}
.ls-nav{
padding:27px;
border-radius:28px;
background:var(–cream);
border:1px solid var(–line);
}
.ls-nav-head{
text-align:center;
max-width:760px;
margin:0 auto 21px;
}
.ls-nav-head h2{margin:0 0 8px;color:#6d559d;font-size:clamp(1.55rem,3vw,2.15rem)}
.ls-nav-head p{margin:0;line-height:1.6}
.ls-periods{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
}
.ls-period{
display:block;
padding:17px 10px;
border-radius:18px;
text-align:center;
background:#fff;
color:#62537d!important;
font-weight:800;
border:1px solid var(–line);
box-shadow:0 7px 18px rgba(87,66,120,.05);
}
.ls-period:hover{background:var(–lav)}
.ls-period small{
display:block;
margin-top:4px;
font-weight:600;
font-size:.72rem;
opacity:.72;
}
.ls-years{
display:grid;
grid-template-columns:repeat(10,1fr);
gap:8px;
margin-top:14px;
}
.ls-year{
display:block;
padding:10px 5px;
border-radius:13px;
text-align:center;
color:#6a5890!important;
background:#fff;
border:1px solid var(–line);
font-weight:800;
font-size:.88rem;
}
.ls-year:hover{background:#f3edff}
.ls-shop-intro{
margin-top:26px;
padding:25px 24px;
border-radius:26px;
text-align:center;
background:linear-gradient(135deg,#fff,#f9f6ff);
border:1px solid var(–line);
}
.ls-shop-intro h2{
margin:0 0 8px;
color:#6d559d;
font-size:clamp(1.45rem,3vw,2rem);
}
.ls-shop-intro p{
max-width:800px;
margin:0 auto;
line-height:1.65;
}
.ls-arrow{
margin-top:16px;
font-size:1.35rem;
color:var(–pink-dark);
font-weight:900;
}
.ls-notice{
margin-top:18px;
padding:17px 19px;
border-radius:18px;
background:#f3edff;
border:1px solid #ded1f1;
text-align:center;
font-size:.9rem;
line-height:1.55;
}
/* IMPORTANT :
Ce bloc s’arrête volontairement ici.
La grille Boutique WooCommerce / catégories / produits
continue ensuite via le template du thème.
*/
@media(max-width:900px){
.ls-strip{grid-template-columns:1fr}
.ls-periods{grid-template-columns:repeat(2,1fr)}
.ls-years{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:620px){
.ls-hero{padding:39px 20px 36px;border-radius:24px}
.ls-nav{padding:21px 15px;border-radius:23px}
.ls-periods{grid-template-columns:1fr 1fr}
.ls-years{grid-template-columns:repeat(4,1fr)}
}

Astuce : si certains boutons d’année ne pointent pas encore vers la bonne URL,
il suffit de remplacer leur lien par l’URL exacte de la catégorie WooCommerce correspondante.