/*
 * PartyCut — styles de base
 * Repris à l'identique du prototype validé : mêmes variables, mêmes classes,
 * mêmes points de rupture. Ne pas reformater sans revérifier le rendu.
 */

/* ============ TOKENS ============ */
:root{
  color-scheme:light only;
  --ink:#000000;
  --ink-soft:#4a4a4a;
  --on-dark:#ffffff;
  --paper:#fffdfb;
  --paper-2:#f6f1fb;
  --grape:#3a1d6e;
  --fuchsia:#ff2f74;
  --mango:#ffb020;
  --mint:#12c2a0;
  --sky:#3d7bff;
  --line:#e6ddf2;
  --cut:#b9a7d6;
  --shadow-soft:0 18px 40px -24px rgba(36,21,70,.45);
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --wrap:1180px;
  --display:"Fredoka",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{background:#fffdfb;color-scheme:light only;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,6.4vw,3.9rem)}
h2{font-size:clamp(1.6rem,4.3vw,2.5rem)}
h3{font-size:1.15rem}
p{margin:0}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.section{padding:64px 0}
.section-head{max-width:640px;margin-bottom:34px}
.section-head p{color:var(--ink-soft);margin-top:12px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--paper-2);color:var(--ink);border-radius:999px;padding:7px 15px;font-size:.83rem;font-weight:700;margin-bottom:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:14px 26px;font-weight:700;font-size:1rem;min-height:44px;text-align:center;white-space:normal;line-height:1.25;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--fuchsia);color:#fff;box-shadow:0 10px 24px -12px rgba(255,47,116,.9)}
.btn-primary:hover{background:#ec1e63}
.btn-dark{background:var(--grape);color:#fff}
.btn-dark:hover{background:#2c1456}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--cut)}
.btn-block{width:100%}
.btn-sm{padding:10px 18px;font-size:.9rem;min-height:44px}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

.hdr{position:sticky;top:0;z-index:60;background:rgba(255,253,251,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:16px;height:70px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:1.4rem;font-weight:700;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.logo-mark{width:34px;height:34px;border-radius:11px;background:var(--fuchsia);display:grid;place-items:center;color:#fff}
.nav{display:none;gap:4px;margin-left:auto}
.nav a{padding:9px 12px;border-radius:10px;font-size:.93rem;font-weight:600;color:var(--ink-soft)}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
.hdr-act{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.icon-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--paper-2);position:relative}
.icon-btn:hover{background:#ece2f8}
.badge{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--fuchsia);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--paper)}
.hdr-contact{display:none}
@media(min-width:1080px){ .nav{display:flex} .hdr-act{margin-left:8px} .burger{display:none} .hdr-contact{display:inline-flex} }
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper);padding:12px 0 20px}
.mnav.open{display:block}
.mnav a{display:block;padding:12px 4px;font-weight:600;border-bottom:1px solid var(--line)}

.hero{background:radial-gradient(70% 90% at 82% 8%, rgba(255,176,32,.20), transparent 60%),radial-gradient(60% 80% at 10% 100%, rgba(18,194,160,.18), transparent 60%),var(--paper-2);border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;gap:34px;padding:52px 0 0}
.hero p.lead{font-size:1.08rem;color:var(--ink-soft);margin-top:16px;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font-size:.9rem;font-weight:600;color:var(--grape)}
.hero-facts span{display:flex;align-items:center;gap:7px}
.fact-icon{width:20px;height:20px;object-fit:contain}
.strip-icon{width:22px;height:22px;object-fit:contain;vertical-align:-6px;margin-right:4px}
.deliv-icon{width:40px;height:40px;object-fit:contain;display:block;margin-bottom:10px}
.stage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,2.5vw,22px);padding-bottom:38px;min-height:300px}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:26px;height:2px;background:repeating-linear-gradient(90deg,var(--cut) 0 10px,transparent 10px 20px)}
.stand{position:relative;display:flex;flex-direction:column;align-items:center}
.stand img{filter:drop-shadow(0 12px 10px rgba(58,29,110,.18));object-fit:contain}
.stand .foot{width:56%;height:9px;border-radius:999px;background:rgba(58,29,110,.14);margin-top:-4px}
.stand.s1 img{width:clamp(84px,22vw,132px)}
.stand.s2 img{width:clamp(104px,27vw,172px)}
.stand.s3 img{width:clamp(72px,19vw,112px)}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;width:11px;height:11px;border-radius:3px;opacity:.85}

.strip{background:var(--grape);color:#fff}
.strip-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px 0;font-size:.9rem;font-weight:600}
.strip-in div{display:flex;align-items:center;gap:9px}
@media(min-width:840px){.strip-in{grid-template-columns:repeat(4,minmax(0,1fr))}}

.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:700px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.cats{grid-template-columns:repeat(6,minmax(0,1fr))}}
.cat{padding:20px 12px;border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-soft);text-align:center;font-weight:700;font-size:.9rem;line-height:1.3;min-height:44px;transition:transform .18s ease}
.cat:hover{transform:translateY(-4px)}
.cat span{display:block;font-size:1.8rem;margin-bottom:8px}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1040px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-soft);overflow:hidden;display:flex;flex-direction:column;text-align:left;transition:transform .18s ease}
.card:hover{transform:translateY(-5px)}
.card-art{position:relative;background:var(--paper-2);padding:22px 12px 16px;display:grid;place-items:center;min-height:190px}
.card-art img{width:96px;height:150px;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(58,29,110,.16))}
.card-art::after{content:"";position:absolute;left:16px;right:16px;bottom:14px;height:2px;background:repeating-linear-gradient(90deg,var(--cut) 0 8px,transparent 8px 16px)}
.card-body{padding:14px 16px 18px}
.card-body .cat-tag{font-size:.76rem;font-weight:700;color:var(--ink-soft)}
.card-body h3{margin:3px 0 8px;font-size:1.05rem}
.card-price{font-weight:700;color:var(--ink)}
.card-price small{font-weight:600;color:var(--ink-soft)}
.empty-note{color:var(--ink-soft);font-size:.9rem;padding:20px;grid-column:1/-1;text-align:center}

.sizes{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.sizes{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}}
.size-card{padding:24px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-soft);text-align:left}
.size-sheets{display:flex;gap:4px;margin-bottom:16px;align-items:flex-end;min-height:118px}
.size-sheets i{background:var(--paper-2);border:3px dashed var(--cut);border-radius:6px;display:block}
.size-card h3{font-size:1.3rem}
.size-dim{font-weight:700;color:var(--ink);margin-top:6px}
.size-note{color:var(--ink-soft);font-size:.9rem;margin-top:4px}

.card-badge{position:absolute;top:12px;left:12px;background:var(--mango);color:#000;padding:5px 12px;border-radius:999px;font-size:.76rem;font-weight:700;z-index:2}
.card-comp{font-size:.82rem;color:var(--ink-soft);margin-bottom:8px}
.card-old{font-weight:600;color:var(--ink-soft);text-decoration:line-through;margin-left:6px;font-size:.86rem}

.steps{display:grid;gap:16px;counter-reset:s}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1020px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{background:#fff;border-radius:var(--r-lg);padding:26px 22px;box-shadow:var(--shadow-soft)}
.step-n{font-family:var(--display);font-size:1rem;color:var(--ink-soft);font-weight:700}
.step h3{margin:8px 0 8px}
.step p{color:var(--ink-soft);font-size:.93rem}

.process{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:880px){.process{grid-template-columns:repeat(4,minmax(0,1fr))}}
.proc{background:var(--paper-2);border-radius:var(--r-md);padding:22px 18px;position:relative}
.proc svg{width:46px;margin-bottom:12px}
.proc h4{font-size:1rem}
.proc p{font-size:.86rem;color:var(--ink-soft);margin-top:6px}

.deliv{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.deliv{grid-template-columns:repeat(3,minmax(0,1fr))}}
.deliv div{background:#fff;border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-soft)}
.deliv span{font-size:1.9rem;display:block;margin-bottom:10px}
.deliv p{color:var(--ink-soft);font-size:.93rem;margin-top:6px}

.faq{max-width:800px}
.faq details{background:#fff;border-radius:var(--r-md);padding:4px 20px;margin-bottom:10px;box-shadow:var(--shadow-soft)}
.faq summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:700;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.4rem;color:var(--fuchsia);line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{padding-bottom:18px;color:var(--ink-soft);font-size:.95rem}

.contact{background:var(--paper-2);border-radius:var(--r-lg);padding:34px 24px;display:grid;gap:24px}
@media(min-width:880px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:46px;align-items:center}}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:.86rem;font-weight:700}
.field input,.field textarea{border:2px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;background:#fff}
.field input:focus,.field textarea:focus{border-color:var(--fuchsia);outline:none}

.ftr{background:var(--grape);color:var(--on-dark);margin-top:20px;padding:52px 0 26px}
.ftr-grid{display:grid;gap:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.ftr-grid{grid-template-columns:2fr minmax(0,1fr) minmax(0,1fr) 1.4fr}}
.ftr h4{color:#fff;font-size:1rem;margin-bottom:14px}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.92rem}
.ftr a:hover{color:#fff}
.ftr .logo{color:#fff;margin-bottom:12px}
.ftr-bot{border-top:1px solid rgba(255,255,255,.15);margin-top:34px;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.85rem}

.scrim{position:fixed;inset:0;background:rgba(36,21,70,.5);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:80}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(420px,100vw);background:var(--paper);z-index:90;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s;display:flex;flex-direction:column}
.drawer.open{opacity:1;visibility:visible;pointer-events:auto}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line)}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px}
.drawer-foot{border-top:1px solid var(--line);padding:20px;background:#fff}
.ci{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line)}
.ci-art{width:52px;height:60px;border-radius:10px;background:var(--paper-2);display:grid;place-items:center;flex:none;overflow:hidden}
.ci-art img{width:100%;height:100%;object-fit:contain}
.ci b{display:block;font-size:.95rem}
.ci small{color:var(--ink-soft)}
.ci-price{margin-left:auto;text-align:right;font-weight:700;white-space:nowrap}
.ci-price button{display:block;margin:4px -6px -6px auto;padding:6px;font-size:.78rem;color:var(--fuchsia);font-weight:700;min-height:32px}
.empty{text-align:center;padding:44px 10px;color:var(--ink-soft)}
.empty span{font-size:2.4rem;display:block;margin-bottom:10px}
.total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.total-row b{font-family:var(--display);font-size:1.7rem;color:var(--ink)}
.cart-lines{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:3px;font-size:.78rem;color:var(--ink-soft)}
.cart-lines li::before{content:"·";margin-right:6px}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);background:var(--grape);color:#fff;padding:14px 22px;border-radius:999px;font-weight:600;font-size:.93rem;z-index:120;transition:transform .3s ease;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);max-width:calc(100% - 32px);text-align:center}
.toast.show{transform:translate(-50%,0)}
.wa-float{position:fixed;right:16px;bottom:16px;z-index:70;width:56px;height:56px;border-radius:999px;background:var(--fuchsia);display:grid;place-items:center;box-shadow:0 14px 30px -12px rgba(255,47,116,.7);color:#fff}
@media(min-width:1080px){.wa-float{display:none}}

/* Menus WordPress : wp_nav_menu() sort une <ul>, que le prototype n'avait pas. */
.nav ul.nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav ul.nav-list li{margin:0}
.nav ul.nav-list a{display:block;padding:9px 12px;border-radius:10px;font-size:.93rem;font-weight:600;color:var(--ink-soft)}
.nav ul.nav-list a:hover{background:var(--paper-2);color:var(--ink)}
.mnav ul.mnav-list{list-style:none;margin:0;padding:0}
.mnav ul.mnav-list a{display:block;padding:12px 4px;font-weight:600;border-bottom:1px solid var(--line)}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.92rem}
.ftr ul li{margin:0}

/* Sections construites dans Elementor : garde la largeur et le rythme du thème. */
.pa-shortcode-grid{margin-block:8px}
.elementor-widget-shortcode .cats,
.elementor-widget-shortcode .grid,
.elementor-widget-shortcode .sizes{margin-block:0}

/* Sections du prototype insérées dans Elementor : elles portent déjà leur
   propre .wrap, donc on neutralise le conteneur d'Elementor autour d'elles. */
.elementor-widget-shortcode > .elementor-widget-container > .hero,
.elementor-widget-html > .elementor-widget-container > .strip{margin-inline:0}
.elementor-widget-shortcode .hero,
.elementor-widget-html .strip{width:100%}
.pa-plain .elementor-container{max-width:100%!important}

/* Réseaux sociaux du pied de page (repris du prototype). */
.socials{display:flex;gap:9px;margin-top:14px}
.socials a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff}
.socials a:hover{background:rgba(255,255,255,.22)}

/* Retours du formulaire de contact. */
.pa-notice{border-radius:12px;padding:12px 16px;margin-bottom:14px;font-weight:700;font-size:.92rem}
.pa-notice-ok{background:#e8fbf5;color:#0b7f68}
.pa-notice-ko{background:#fff1f5;color:#b0114a}

/* ============ BARRE D'ONGLETS MOBILE ============
   Navigation fixe en bas, reprise du prototype. Masquée dès 900px, où le
   menu de l'en-tête prend le relais. */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:74;display:none;
  background:rgba(255,253,251,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;border-radius:14px;font-size:.7rem;font-weight:700;color:var(--ink-soft);
  position:relative;min-height:52px;justify-content:center;text-align:center;line-height:1.2}
.tabbar a[aria-current="page"]{color:var(--ink);background:var(--paper-2)}
.tabbar svg{flex:none}
.tabbar .tb-badge{position:absolute;top:0;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--fuchsia);color:#fff;font-size:.66rem;font-weight:700;
  display:grid;place-items:center}
@media(max-width:899px){
  .tabbar{display:flex}
  /* Place pour la barre : sinon elle recouvre la fin du contenu. */
  body{padding-bottom:82px}
  /* Sur la fiche d'un pack, la barre d'achat prend le relais. */
  body.single-product .tabbar{display:none}
}

/* Bouton WhatsApp flottant : remonté au-dessus de la barre d'onglets. */
@media(max-width:899px){
  .wa-float{bottom:96px;width:52px;height:52px}
}

/* ============ REPRISE EN MAIN DES BOUTONS ============
   Reprise en main des <button> face au kit Elementor : celui-ci applique sa
   couleur et son padding à tous les <button> de la page, ce qui écrasait le
   fond des boutons-icônes et réduisait leur icône à zéro. Les sélecteurs
   ci-dessous sont volontairement plus spécifiques que ceux du kit. */
.hdr button.icon-btn,
.drawer button.icon-btn,
.panel button.panel-icon-btn{
  width:44px;height:44px;min-height:44px;padding:0;
  background:var(--paper-2);color:var(--ink);
  border-radius:14px;box-shadow:none;font-size:1rem
}
.hdr button.icon-btn:hover,
.drawer button.icon-btn:hover{background:#ece2f8}
.hdr button.icon-btn svg,
.drawer button.icon-btn svg{width:21px;height:21px;flex:none}
.panel button.panel-icon-btn{width:36px;height:36px;min-height:36px;border-radius:12px;font-size:1.15rem}

/* Onglets de la galerie produit et puces de filtre : même correction. */
.gal button{background:var(--paper-2);color:var(--ink-soft)}
.gal button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.panel-filters button.chip{background:#fff;color:var(--ink-soft);padding:8px 15px}
.panel-filters button.chip[aria-pressed="true"]{background:var(--grape);color:var(--on-dark)}

/* Ancres : le header colle en haut (70px), on decale la cible. */
.hero[id],.section[id],section[id]{scroll-margin-top:86px}