/*
Theme Name: Parapharmacie de l'Étoile
Theme URI: https://para.pharmacieetoile.com
Author: Billy_Marketing
Author URI: https://billy-marketing.com
Description: Thème sur-mesure pour le catalogue vitrine Parapharmacie de l'Étoile (Cotonou).
Version: 1.0
Text Domain: etoile-para
*/

/* =========================================================
   Parapharmacie de l'Étoile — Système de design "Étoile Corail"
   Variante chaleureuse/retail du système "Étoile Émeraude" du site institutionnel.
   Fraunces (titres) + Plus Jakarta Sans (corps, labels)
   ========================================================= */

:root{
  --paper: #FCF9F4;
  --paper-alt: #F5EFE4;
  --ink: #2A2320;
  --ink-soft: #3A2F29;
  --sage: #4F7A63;
  --sage-hover: #3F6350;
  --sage-pale: #E7EFE9;
  --coral: #E0654A;
  --coral-hover: #C9503A;
  --coral-pale: #FBE7E1;
  --gold: #A5742A;
  --gold-pale: #F1E6D2;
  --text: #3A322D;
  --text-soft: #766A62;
  --line: #EAE1D4;
  --white: #FFFFFF;
  --shadow-soft: 0 10px 30px rgba(42,35,32,.06);
  --shadow-medium: 0 20px 48px rgba(42,35,32,.12);
  --radius: 18px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--text); font-family:'Plus Jakarta Sans', sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:'Fraunces', serif; font-weight:500; color:var(--ink); line-height:1.18; letter-spacing:-.01em;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}

.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--coral); font-weight:700; margin-bottom:14px;}
.eyebrow::before{content:''; width:16px; height:1.5px; background:var(--coral);}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}

.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:100px; font-size:14.5px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; border:1.5px solid transparent; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s ease;}
.btn:hover{transform:translateY(-3px);}
.btn:active{transform:translateY(-1px);}
.btn-primary{background:var(--coral); color:var(--white); box-shadow:0 10px 24px -10px rgba(224,101,74,.55);}
.btn-primary:hover{background:var(--coral-hover);}
.btn-whatsapp{background:#25D366; color:var(--white); box-shadow:0 10px 24px -10px rgba(37,211,102,.55);}
.btn-whatsapp:hover{background:#1EBE59;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-outline:hover{background:rgba(42,35,32,.05);}
.btn-outline-light{background:transparent; color:var(--white); border-color:rgba(255,255,255,.45);}
.btn-outline-light:hover{background:rgba(255,255,255,.12); border-color:var(--white);}
.btn-sm{padding:10px 20px; font-size:13px;}
.btn svg{width:18px; height:18px;}

.utility{background:var(--sage); color:var(--white); font-size:12.5px;}
.utility .wrap{display:flex; justify-content:center; align-items:center; padding:9px 32px; gap:10px; flex-wrap:wrap; text-align:center;}
.utility .right{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.utility .right a{color:var(--white); font-weight:600;}
.utility .right a:hover{color:var(--paper);}
.utility .sep{opacity:.5;}

header{position:sticky; top:0; z-index:100; background:rgba(252,249,244,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:padding .3s ease;}
header .wrap{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; transition:padding .3s ease;}
header.shrink .wrap{padding:11px 32px;}
.logo{display:flex; align-items:center; gap:12px;}
.logo-mark{width:36px; height:36px; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.logo:hover .logo-mark{transform:rotate(45deg);}
.logo-text{font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.01em;}
.logo-sub{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft);}

nav{display:flex; gap:28px; font-size:14.5px; font-weight:500; color:var(--ink-soft);}
nav a{position:relative; padding:6px 0;}
nav a::after{content:''; position:absolute; bottom:0; left:0; width:0; height:1.5px; background:var(--coral); transition:width .25s ease;}
nav a:hover, nav a.active{color:var(--coral);}
nav a:hover::after, nav a.active::after{width:100%;}

/* Menu mobile */
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; border:1px solid var(--line); border-radius:8px; background:var(--white); cursor:pointer; flex-shrink:0;}
.nav-toggle span{display:block; width:18px; height:1.5px; background:var(--ink); margin:0 auto; transition:transform .25s ease, opacity .25s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.hero{position:relative; overflow:hidden; padding:84px 0 96px;}
.hero .blob{position:absolute; border-radius:50%; opacity:.55; filter:blur(2px); z-index:0;}
.hero .b1{width:360px; height:360px; background:var(--coral-pale); top:-140px; right:-80px;}
.hero .b2{width:240px; height:240px; background:var(--sage-pale); bottom:-90px; left:-60px;}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero h1{font-size:46px; margin:6px 0 20px;}
.hero h1 span{color:var(--coral); font-style:italic;}
.hero p.lede{font-size:16.5px; color:var(--text-soft); max-width:470px; margin-bottom:30px;}
.cta-row{display:flex; gap:14px; margin-bottom:30px; flex-wrap:wrap;}
.mm-row{display:flex; align-items:center; gap:12px; font-size:12.5px; color:var(--text-soft); flex-wrap:wrap;}
.mm-pill{background:var(--white); border:1px solid var(--line); padding:6px 13px; border-radius:100px; font-weight:600; font-size:11.5px; color:var(--sage);}

.hero-visual{position:relative; aspect-ratio:1/1;}
.hero-main-img{position:absolute; inset:6%; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-medium);}
.hero-main-img img{width:100%; height:100%; object-fit:cover;}
.hero-card{position:absolute; background:var(--white); border-radius:16px; box-shadow:var(--shadow-medium); padding:13px 16px; display:flex; align-items:center; gap:11px; animation:float 5.5s ease-in-out infinite;}
.hero-card .dot{width:34px; height:34px; border-radius:10px; overflow:hidden; flex-shrink:0;}
.hero-card .dot img{width:100%; height:100%; object-fit:cover;}
.hc1{top:4%; left:-6%; animation-delay:0s;}
.hc2{bottom:8%; right:-8%; animation-delay:1.3s;}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}

.value-strip{background:var(--sage); padding:28px 0;}
.value-strip .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.value-item{display:flex; align-items:center; gap:12px; color:var(--white); justify-content:center;}
.value-item .ic{width:24px; height:24px; flex-shrink:0;}
.value-item span{font-size:13px; font-weight:500;}

section{padding:92px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:32px; margin-top:4px;}
.section-head p{color:var(--text-soft); margin-top:16px; font-size:15.5px;}

.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.cat-card{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; box-shadow:var(--shadow-soft); transition:transform .35s ease, box-shadow .35s ease;}
.cat-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-medium);}
.cat-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.cat-card:hover img{transform:scale(1.06);}
.cat-card::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(42,35,32,.75) 0%, rgba(42,35,32,0) 55%);}
.cat-label{position:absolute; left:18px; bottom:16px; z-index:2; color:var(--white);}
.cat-label .n{font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.8;}
.cat-label h3{color:var(--white); font-size:18px;}

.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.product{background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .3s ease, box-shadow .3s ease; border:1px solid var(--line);}
.product:hover{transform:translateY(-6px); box-shadow:var(--shadow-medium);}
.product-img{aspect-ratio:1/1; position:relative; overflow:hidden; background:var(--paper-alt);}
.product-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.product:hover .product-img img{transform:scale(1.06);}
.product-badge{position:absolute; top:12px; left:12px; background:var(--coral); color:var(--white); font-size:10.5px; font-weight:700; padding:5px 11px; border-radius:100px; z-index:2;}
.product-body{padding:20px;}
.product-cat{font-size:11px; color:var(--text-soft); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-bottom:6px;}
.product h3{font-size:16px; margin-bottom:10px;}
.product a.btn{width:100%; justify-content:center;}

.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.test-card{background:var(--white); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-soft);}
.stars{color:var(--coral); font-size:13px; margin-bottom:12px;}
.test-card p{font-size:14px; color:var(--text-soft); margin-bottom:14px;}
.test-name{font-size:12.5px; font-weight:600;}

.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.icon-card{background:var(--white); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-soft); transition:transform .25s ease;}
.icon-card:hover{transform:translateY(-5px);}
.icon-card .ic{width:30px; height:30px; margin-bottom:14px; color:var(--sage);}
.icon-card h3{font-size:15.5px; margin-bottom:8px;}
.icon-card p{font-size:13.5px; color:var(--text-soft);}
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}

.whatsapp-cta{background:var(--sage); border-radius:24px; padding:44px 50px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; box-shadow:var(--shadow-medium);}
.whatsapp-cta h2{color:var(--white); font-size:24px;}
.whatsapp-cta p{color:rgba(255,255,255,.85); font-size:14px; margin-top:6px;}

.legal{max-width:760px; margin:0 auto;}
.legal h2{font-size:20px; margin:34px 0 12px;}
.legal h2:first-child{margin-top:0;}
.legal p, .legal li{font-size:14.5px; color:var(--text-soft); margin-bottom:10px;}
.legal ul{padding-left:20px; list-style:disc;}
.legal table{width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px;}
.legal table th, .legal table td{text-align:left; padding:10px 12px; border:1px solid var(--line); color:var(--text-soft);}
.legal table th{background:var(--paper-alt); color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; font-weight:600;}
.legal .note{background:var(--gold-pale); border-radius:var(--radius); padding:18px 22px; font-size:13.5px; color:var(--ink-soft); margin-bottom:30px;}
.legal-toc{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px;}
.legal-toc a{background:var(--white); border:1px solid var(--line); font-size:12.5px; padding:8px 14px; border-radius:100px; color:var(--ink-soft); font-weight:500;}
.legal-toc a:hover{border-color:var(--coral); color:var(--coral);}

.faq-item{background:var(--white); border-radius:var(--radius); margin-bottom:14px; box-shadow:var(--shadow-soft); overflow:hidden; border:1px solid var(--line);}
.faq-q{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; cursor:pointer; font-weight:600; font-size:15px;}
.faq-chevron{width:18px; height:18px; flex-shrink:0; transition:transform .3s ease; color:var(--coral);}
.faq-item.open .faq-chevron{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{padding:0 24px 20px; font-size:14px; color:var(--text-soft);}
.faq-item.open .faq-a{max-height:260px;}

.contact-form{
  display:grid; gap:18px; max-width:520px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 34px; box-shadow:var(--shadow-soft);
}
.contact-form input, .contact-form textarea{border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; outline:none; transition:border-color .2s; background:var(--white); width:100%;}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--coral);}
.contact-form textarea{resize:vertical; min-height:130px;}
.contact-form label{font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:4px; display:block;}
.contact-form button[type="submit"]{width:100%; justify-content:center;}
.contact-form .hp-field{position:absolute !important; left:-9999px !important; top:auto; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0; pointer-events:none;}
.form-notice{border-radius:var(--radius); padding:16px 20px; font-size:13.5px; margin-bottom:20px;}
.form-notice.success{background:var(--sage-pale); color:var(--sage-hover); border:1px solid rgba(79,122,99,.3);}
.form-notice.error{background:var(--coral-pale); color:var(--coral-hover); border:1px solid rgba(224,101,74,.3);}

footer{background:var(--ink); color:rgba(252,249,244,.68); padding:70px 0 30px; margin-top:0;}
footer .wrap{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(252,249,244,.12);}
footer .logo-text{color:var(--paper);}
footer h4{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--coral-pale); margin-bottom:16px; font-weight:700;}
footer li{font-size:13.5px; margin-bottom:9px;}
footer li a:hover{color:var(--coral-pale);}
.footer-note{font-size:11.5px; color:rgba(252,249,244,.4); margin-top:18px; line-height:1.5;}
.foot-bottom{max-width:1200px; margin:22px auto 0; padding:0 32px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:rgba(252,249,244,.4);}
.credit-brand{
  background:linear-gradient(90deg, #FFAE5C, #F2793A 45%, #C9501F);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  font-weight:700; transition:filter .3s ease, background-position .5s ease;
}
.credit-brand:hover{filter:brightness(1.2); background-position:right center;}

.wa-float{position:fixed; bottom:104px; right:24px; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.22); cursor:pointer; z-index:80; animation:wapulse 2.6s infinite;}
@keyframes wapulse{0%{box-shadow:0 10px 26px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 10px 26px rgba(0,0,0,.22), 0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 10px 26px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,0);}}

.page-hero{padding:52px 0 36px; text-align:center;}
.page-hero .eyebrow{justify-content:center;}
.page-hero h1{font-size:36px;}
.breadcrumb{font-size:12.5px; color:var(--text-soft); margin-bottom:16px;}
.breadcrumb a:hover{color:var(--coral);}

.cat-chips{display:flex; gap:12px; justify-content:center; margin-bottom:44px; flex-wrap:wrap;}
.chip{padding:10px 20px; border-radius:100px; border:1.5px solid var(--line); font-size:13.5px; font-weight:600; cursor:pointer; transition:all .2s; background:var(--white);}
.chip.active, .chip:hover{border-color:var(--coral); color:var(--coral); background:var(--coral-pale);}

@media (max-width:960px){
  .hero .wrap, .split{grid-template-columns:1fr; gap:44px;}
  .value-strip .wrap{grid-template-columns:1fr; gap:14px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid, .services-grid, .test-grid, .blog-grid{grid-template-columns:1fr 1fr; gap:16px;}
  footer .wrap{grid-template-columns:1fr 1fr; gap:32px;}
  .hero h1{font-size:34px;}
  section{padding:56px 0;}
  .contact-form{padding:24px 20px;}
  .nav-toggle{display:flex;}
  header .wrap > a.btn-primary.btn-sm{display:none;}
  nav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:99;
    flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-medium); padding:8px 32px;
  }
  nav.open{display:flex;}
  nav a{padding:14px 0; border-bottom:1px solid var(--line); width:100%;}
  nav a:last-child{border-bottom:none;}
  .whatsapp-cta{flex-direction:column; text-align:center;}
}
@media (max-width:560px){
  .cat-grid, .product-grid, .services-grid, .test-grid, .blog-grid, footer .wrap{grid-template-columns:1fr;}
  .cta-row{flex-direction:column;}
  header .wrap{padding:14px 20px;}
  .wrap{padding:0 20px;}
  .hero h1{font-size:28px;}
  .wa-float{bottom:94px; right:16px; width:50px; height:50px;}
  .wa-float svg{width:23px; height:23px;}
}