/* Thème Pépilles — valeurs relevées sur pepilles.fr (mobile 375 px). Polices auto-hébergées (SIL OFL, voir assets/fonts). */
@font-face{font-family:Comfortaa;src:url(/assets/fonts/comfortaa-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Comfortaa;src:url(/assets/fonts/comfortaa-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Abril Fatface";src:url(/assets/fonts/abril-fatface-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/bodoni-moda-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/bodoni-moda-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --pink:#cc1d86; --pink-hover:#e02394; --orange:#FA4500; --orange-hover:#ff5515; --cream:#FDF5EA;
  --bg:#fff; --fg:var(--orange); --muted:rgba(250,69,0,.75); --line:rgba(250,69,0,.18);
  --accent:var(--pink); --accent-fg:var(--cream);
  --announce-bg:var(--pink); --announce-fg:#fff;
  --font-body:Comfortaa,sans-serif; --font-head:"Abril Fatface",serif; --font-accent:"Bodoni Moda",serif;
  --btn-radius:100px; --radius:4px; --card-radius:10px; --pad:16px; --header-h:66px;
}
body{font-size:14px;line-height:1.4;letter-spacing:0;color:var(--fg)}
h1,h2,h3{font-family:var(--font-head);letter-spacing:0;color:var(--pink);font-weight:400}
a{color:inherit}

/* Annonce 44 px */
.announce{min-height:44px;display:grid;place-items:center;padding:0 var(--pad);font-size:14px}

/* Header : menu+recherche | logo | panier, puis bande orange */
.header{grid-template-columns:1fr auto 1fr;border:0;color:var(--orange);height:var(--header-h);padding:0 8px}
.header-left{display:flex;align-items:center}
.header .logo img{height:40px;width:auto;max-height:none}
.header-band{height:44px;background:var(--orange)}
.icon-btn svg{stroke-width:1.8}
.cart-count{background:var(--pink);color:#fff}

/* Titres de section */
.section{padding:48px var(--pad) 64px}
.section-title{font-size:clamp(1.75rem,7vw,3rem);text-align:center;margin-bottom:16px}
.page-title{font-size:clamp(2.25rem,9vw,4.5rem);color:var(--pink)}

/* Grille produits : 2 colonnes, 12 px */
.grid{gap:24px 12px}
.card{text-align:left;align-items:stretch;gap:4px}
.card-media{border-radius:var(--card-radius);aspect-ratio:1;background:var(--cream)}
.card-media img{border-radius:0}
.quick-add{position:absolute;right:8px;bottom:8px;width:36px;height:36px;border-radius:50%;border:0;background:var(--cream);color:var(--orange);display:grid;place-items:center;cursor:pointer;z-index:2;text-decoration:none}
.quick-add svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.quick-add:hover{background:#fff}
.card-title{font-family:var(--font-body);font-size:14px;color:var(--pink);margin-top:6px}
.price{color:var(--orange);font-size:14px}
.price s{color:var(--muted)}
.badge{left:8px;right:auto;top:8px;bottom:auto;background:var(--pink);color:#fff}

/* Boutons */
.btn{background:var(--pink);border-color:var(--pink);color:var(--cream);border-radius:var(--btn-radius);font-size:14px;min-height:48px;padding:0 24px}
.btn:hover{background:var(--pink-hover);border-color:var(--pink-hover);color:#fff;box-shadow:none}
.btn-outline{background:var(--orange);border-color:var(--orange);color:var(--cream)}
.btn-outline:hover{background:var(--orange-hover);border-color:var(--orange-hover);color:#000}

/* Média + contenu (fond rose) */
.media-content{background:var(--pink);color:#fff;display:grid}
.media-content>img{width:100%;height:auto;display:block}
.media-content-body{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;padding:48px var(--pad) 64px}
.media-content-body .deco{max-width:min(70%,320px)}
.media-content-body h2{color:#fff;font-size:clamp(2rem,8vw,3rem);margin:0;max-width:32.5em}
.media-content-body p{margin:0;max-width:32.5em}
.media-content .btn{background:var(--cream);border-color:var(--cream);color:var(--orange)}
.media-content .btn:hover{background:#fff;border-color:#fff}
@media (min-width:750px){.media-content{grid-template-columns:1fr 1fr;align-items:center}}

/* Collections */
.collections-section{padding-top:48px}
.collections-section .section-title{text-align:left}
.collection-card img{border-radius:var(--card-radius)}
.collection-card span{font-family:var(--font-body);color:var(--pink);font-size:16px}
@media (max-width:749px){
  .collection-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);gap:12px;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);scrollbar-width:none}
  .collection-list::-webkit-scrollbar{display:none}
  .collection-card{flex:0 0 70%;scroll-snap-align:start}
}

/* Footer */
.footer{background:var(--cream);color:#000;padding:20px var(--pad) 18px;text-align:left}
.footer h2{font-size:1.25rem;color:var(--pink);margin:0 0 .3rem}
.socials{justify-content:flex-start;margin:0}
.footer-utilities{background:var(--pink);color:#fff;padding:20px var(--pad) 18px;font-size:13px}
.footer-utilities a{color:#fff}
.footer-utilities details summary{cursor:pointer;list-style:none;display:inline-flex;gap:.4rem;align-items:center;margin-top:.6rem}
.footer-utilities details summary::-webkit-details-marker{display:none}
.footer-utilities details summary::after{content:"▾";font-size:.8em}
.footer-utilities details[open] summary::after{content:"▴"}
.footer-utilities .policies{flex-direction:column;align-items:flex-start;gap:.5rem;margin:.8rem 0 0}
.footer-utilities .copy{margin:0;color:#fff}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* Fiche produit */
.product-info h1{font-size:clamp(2rem,8vw,3rem);margin:.2em 0}
.product-info .price{font-size:18px}
.product-info small,.vendor{color:var(--muted)}
.product .rte{color:#000}
.pill span{border-color:var(--orange);color:var(--orange)}
.pill input:checked+span{background:var(--orange);color:#fff}
.qty{border-color:var(--orange);border-radius:var(--btn-radius);color:var(--orange)}
.qty button,.qty input{color:var(--orange);background:transparent}
.gallery-dots button{border-color:var(--pink)}.gallery-dots button.on{background:var(--pink)}

/* Pages de texte */
.rte{color:#000;line-height:1.6}
.rte h2,.rte h3{color:var(--pink);margin-top:1.6em}
.rte a{color:var(--pink)}
.contact-form input,.contact-form textarea,.search-form input,.search-inline input{border-color:var(--orange);border-radius:var(--radius);color:#000}

/* Tiroirs */
.drawer{color:var(--orange)}
.drawer h2{color:var(--pink)}
.cart-line a{color:var(--pink)}
.card-link{display:block;width:100%;height:100%}
.card-link img{width:100%;height:100%;object-fit:cover}