/* Styles communs aux pages du site Kura Island (Boutique, Mon compte, Infos). */
:root{--ink:#141414;--paper:#FFF8EC;--red:#E63946;--moon:#F2C94C;--night:#2B2D6E;--sakura:#C2457A;--neon:#7B5CFF;--line:rgba(20,20,20,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif;line-height:1.55;font-size:16px}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
.dg{font-family:"Dela Gothic One",sans-serif;font-weight:400;line-height:1.12}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* ---------- En-tête et rubriques ---------- */
#top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:3px solid var(--ink)}
#top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;flex:none}
.hanko{width:38px;height:38px;border-radius:6px;background:var(--red);color:var(--paper);display:grid;place-items:center;font-size:24px;box-shadow:2px 2px 0 var(--ink)}
.logo .w{font-size:13px;line-height:1}
nav.tabs{display:flex;gap:4px;font-weight:700;font-size:15px}
nav.tabs a{color:inherit;text-decoration:none;padding:7px 12px;border-radius:999px;border:2px solid transparent;white-space:nowrap}
nav.tabs a:hover{border-color:var(--ink)}
nav.tabs a.on{background:var(--ink);color:#fff}
.bag{display:flex;align-items:center;gap:8px;background:var(--red);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:7px 14px;font-weight:700;box-shadow:2px 2px 0 var(--ink);flex:none}
.bag b{background:#fff;color:var(--ink);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:13px}
/* téléphone : les rubriques passent sous le logo, en une ligne qui défile */
@media (max-width:760px){
  #top .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:8px;row-gap:8px}
  nav.tabs{order:3;width:100%;justify-content:space-between;font-size:14px}
  nav.tabs a{flex:1;text-align:center;padding:6px 6px;border-color:var(--line)}
  html{scroll-padding-top:150px}
}
.annonce{background:var(--ink);color:#fff;text-align:center;font-size:13.5px;font-weight:700;padding:7px 12px}
.annonce .tel{display:none}
@media (max-width:520px){ .annonce{font-size:12.5px;padding:6px 10px} .annonce .pc{display:none} .annonce .tel{display:inline} }

/* ---------- Éléments communs ---------- */
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;border:3px solid var(--ink);border-radius:12px;padding:13px 22px;font-weight:700;font-size:16px;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s;text-align:center}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.chip{display:inline-block;background:var(--moon);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;font-weight:700;font-size:13px}
section.blk{padding:44px 0}
h2.t{font-size:clamp(26px,3.4vw,38px);margin:10px 0 8px}
p.sub{margin:0 0 24px;max-width:640px;font-size:16.5px}
.add{background:var(--red);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px}
.todo{background:#FFF3B0;padding:0 4px;border-radius:4px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }
.step{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:16px 18px}
.step b{display:flex;align-items:center;gap:10px;font-size:17px}
.step b::before{counter-increment:s;content:counter(s);font-family:"Dela Gothic One";display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;flex:none}
.step p{margin:8px 0 0;font-size:14.5px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
@media (max-width:760px){ .trust{grid-template-columns:1fr 1fr} }
.trust div{border:2px solid var(--ink);border-radius:12px;padding:10px 12px;background:var(--paper);font-size:13.5px}
.trust b{display:block;font-size:14.5px}

.faq details{background:#fff;border:3px solid var(--ink);border-radius:12px;margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:700;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Dela Gothic One"}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 16px 14px;font-size:15px}

footer{border-top:3px solid var(--ink);padding:26px 16px;text-align:center;font-size:13.5px;margin-top:20px}
footer a{color:inherit;display:inline-block;padding:6px 2px}

/* ---------- Fiche produit ---------- */
#card{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(10,10,30,.55);opacity:0;pointer-events:none;transition:opacity .2s}
#card.on{opacity:1;pointer-events:auto}
#card .c{position:relative;width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper);border:4px solid var(--ink);border-radius:16px;padding:16px;box-shadow:8px 8px 0 var(--ink);transform:translateY(12px);transition:transform .25s}
#card.on .c{transform:none}
#card .x{position:sticky;top:0;float:right;z-index:2;background:var(--paper);border:3px solid var(--ink);border-radius:50%;width:36px;height:36px;font-weight:700}
#card .pic{aspect-ratio:4/3;margin:6px 0 12px;border:3px solid var(--ink);border-radius:10px;overflow:hidden;display:grid;place-items:center;font-size:90px;background:radial-gradient(circle at 50% 40%,#fff,#FFE9D6 75%)}
#card .pic img{width:100%;height:100%;object-fit:cover}
#card h3{margin:0;font-size:22px}
#card .ctx{font-size:12.5px;font-weight:700;opacity:.65;margin-bottom:2px}
#card .desc{margin:6px 0 10px;font-size:14.5px}
#card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 10px;padding:10px 12px;background:#fff;border:2px solid var(--ink);border-radius:8px;font-size:13.5px}
#card dt{font-weight:700} #card dd{margin:0}
#card .cert{font-size:13.5px;margin-bottom:4px}
#card .src{font-size:11.5px;opacity:.65;margin-bottom:12px}
#card .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#card .row .p{font-family:"Dela Gothic One";font-size:26px}
#card .row .p small{display:block;font-family:"Zen Kaku Gothic New";font-size:12px;font-weight:700;opacity:.65}
#card .sh{font-size:13.5px;font-weight:700;opacity:.7;margin-top:2px}

/* ---------- Panier ---------- */
#drawer{position:fixed;inset:0;z-index:75;background:rgba(10,10,30,.5);opacity:0;pointer-events:none;transition:opacity .25s}
#drawer.on{opacity:1;pointer-events:auto}
#drawer aside{position:absolute;right:0;top:0;bottom:0;width:min(420px,100vw);background:var(--paper);border-left:3px solid var(--ink);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.65,0,.25,1)}
#drawer.on aside{transform:none}
#drawer header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:3px solid var(--ink)}
#drawer h2{margin:0;font-size:24px}
#drawer .close{background:#fff;border:3px solid var(--ink);border-radius:50%;width:36px;height:36px;font-weight:700}
#cartList{list-style:none;margin:0;padding:8px 18px;overflow:auto;flex:1}
#cartList li{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;padding:12px 0;border-bottom:2px dashed var(--line)}
#cartList .nm{font-weight:700;font-size:14.5px} #cartList .nm small{display:block;font-weight:500;font-size:12px;opacity:.7}
#cartList .qty{display:flex;align-items:center;gap:6px} #cartList .qty button{width:28px;height:28px;border:2px solid var(--ink);border-radius:50%;background:#fff;font-weight:700}
#cartList .pr{font-weight:700;min-width:60px;text-align:right}
#cartList .rm{background:none;border:0;font-size:15px;opacity:.6}
#cartList li.empty{display:block;border:0;font-weight:700;padding-top:18px}
#drawer .foot{border-top:3px solid var(--ink);padding:14px 18px 18px;background:#fff}
#drawer .when{font-size:13.5px;font-weight:700;background:#FFF3E2;border:2px solid var(--ink);border-radius:8px;padding:6px 10px;margin-bottom:8px}
#drawer .when small{display:block;font-weight:500;font-size:12px;opacity:.75}
#cartList:has(.empty) ~ .foot .when{display:none}
#drawer .nk{font-size:13.5px;margin-bottom:8px}
#drawer .ln{display:flex;justify-content:space-between;font-size:14.5px;margin:3px 0}
#drawer .ln.tot{font-size:18px;margin-top:8px} #drawer .ln.tot b{font-family:"Dela Gothic One";font-weight:400;font-size:24px}
#drawer .pay{display:block;width:100%;margin-top:10px;background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:10px;padding:12px;font-weight:700;font-size:16px;box-shadow:4px 4px 0 var(--ink)}
#drawer .pay:disabled{opacity:.4;cursor:not-allowed}
#drawer .keep{display:block;width:100%;margin-top:8px;background:none;border:0;font-weight:700;text-decoration:underline}
#drawer .upsell{margin-top:10px;border:2px dashed var(--ink);border-radius:10px;padding:8px 10px;font-size:13.5px;display:flex;align-items:center;justify-content:space-between;gap:8px}

#toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,160px);z-index:80;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:10px 14px;font-weight:700;display:flex;gap:10px;align-items:center;transition:transform .3s;box-shadow:4px 4px 0 var(--ink);max-width:calc(100vw - 24px)}
#toast.on{transform:translate(-50%,0)}
#toast .nk-face{width:46px;height:46px;flex:none;animation:hop .5s ease}
@keyframes hop{30%{transform:translateY(-6px) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}}
/* Nuki */
.nk-face{display:inline-block;width:40px;height:40px;vertical-align:middle;font-style:normal}
.nk-face svg{width:100%;height:100%;display:block}
.nk-face.sm{width:34px;height:34px;margin-right:8px}
.nk-face.xs{width:24px;height:24px;margin-right:6px}
#cartList li.empty{display:flex;gap:12px;align-items:center}
#cartList li.empty .nk-face{width:64px;height:64px;flex:none}
footer .nk-face{width:44px;height:44px;margin-bottom:4px}
#toast button{background:var(--red);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:4px 10px;font-weight:700;font-size:13px;white-space:nowrap}

/* ---------- Pages légales (mentions légales, CGV, confidentialité) ---------- */
.legal-doc{max-width:820px;margin:0 auto;padding:36px 16px 20px}
.legal-doc h1{font-size:clamp(28px,4vw,40px);margin:0 0 4px}
.legal-doc .maj{font-size:13.5px;opacity:.7;margin:0 0 18px}
.legal-doc .toc{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:12px 18px;margin-bottom:22px;font-size:14.5px}
.legal-doc .toc ol{margin:6px 0 0;padding-left:20px;columns:2;column-gap:28px}
@media (max-width:620px){ .legal-doc .toc ol{columns:1} }
.legal-doc .toc a{color:inherit}
.legal-doc h2{font-size:21px;margin:30px 0 8px;scroll-margin-top:120px}
.legal-doc h3{font-size:16.5px;margin:18px 0 4px}
.legal-doc p,.legal-doc li{font-size:15px}
.legal-doc ul{padding-left:20px}
.legal-doc .box{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:14px 18px;margin:12px 0}
.legal-doc .box p{font-size:14px;margin:0 0 8px}
.legal-doc .box p:last-child{margin-bottom:0}
.legal-doc .resume{background:#FFF3E2;border:3px solid var(--ink);border-radius:12px;padding:12px 18px;margin:0 0 20px;box-shadow:4px 4px 0 var(--ink)}
.legal-doc .resume ul{margin:6px 0 0}
.legal-doc .form{background:#fff;border:3px dashed var(--ink);border-radius:12px;padding:14px 18px;font-size:14.5px}
.legal-doc .form p{margin:0 0 10px}
.legal-doc table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:3px solid var(--ink);border-radius:12px;overflow:hidden;display:block;overflow-x:auto}
.legal-doc th,.legal-doc td{border-bottom:2px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.legal-doc th{background:var(--paper)}
.legal-doc .back{display:inline-block;margin-bottom:14px;font-weight:700;color:inherit}

/* Pied de page : liens à gauche, réseaux sociaux en bas à droite */
footer{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:1120px;margin-left:auto;margin-right:auto;text-align:left}
footer .social{display:flex;gap:10px;flex:none}
footer .social a{width:42px;height:42px;padding:0;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:#fff;box-shadow:2px 2px 0 var(--ink);transition:transform .15s,background .15s,color .15s}
footer .social a:hover{transform:translate(-1px,-1px);background:var(--ink);color:#fff}
footer .social svg{width:21px;height:21px}
@media (max-width:760px){ footer{flex-direction:column;align-items:center;text-align:center} }