@font-face{font-family:'Gel Pen';src:url('fonts/gelpen-heavy.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:'Gel Pen Medium';src:url('fonts/gelpen-medium.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:'Chonky Poster';src:url('fonts/chonky-poster.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  --ink:#2A2320; --ink2:#4A3F38; --muted:#6B5E55; --line:#E8DFD3; --line2:#D8CDBF;
  --bg:#FBF7F2; --white:#FFFFFF; --honey:#F6E7C8; --honey-ink:#4F350B; --gold:#B07A1A;
  --terra:#B85F42; --ok:#2F6B4F; --warn:#9A2E1F;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Nunito',system-ui,sans-serif;font-size:16px;line-height:1.5}
img{max-width:100%}
a{color:#7A5212}a:hover{color:var(--honey-ink)}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid #B07A1A;outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.title{font-family:'Gel Pen Medium','Nunito',sans-serif;font-weight:400;line-height:1.08;margin:0}
.lead{color:var(--ink2);font-size:17px;margin:0}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* Header */
header.top{border-bottom:1px solid var(--line);background:var(--white);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-family:'Gel Pen Medium','Nunito',sans-serif;font-size:23px}
.brand img{width:48px;height:48px;object-fit:contain}
nav.main{display:flex;flex-wrap:wrap;gap:2px;align-items:center}
nav.main a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;font-weight:800;font-size:15px;color:var(--ink2);text-decoration:none;border:1.5px solid transparent}
nav.main a[aria-current="page"]{border-color:var(--ink);color:var(--ink);background:var(--bg)}
nav.main a.cart{margin-left:6px;background:var(--ink);color:#fff;border-color:var(--ink)}
nav.main a.cart[aria-current="page"]{background:var(--terra);border-color:var(--terra)}

/* Buttons */
.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 26px;border-radius:999px;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none;border:2px solid transparent;text-align:center}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;color:#fff}
.btn-terra{background:var(--terra);color:#fff;box-shadow:0 4px 12px rgba(184,95,66,.25)}
.btn-terra:hover{background:#9E4D33;color:#fff}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn[disabled]{background:#E0D6CA;color:var(--muted);cursor:not-allowed;box-shadow:none;border-color:transparent}
.link{background:none;border:0;padding:0;min-height:32px;cursor:pointer;color:var(--ink);font-weight:800;text-decoration:underline;font-size:15px}
.pill{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;cursor:pointer;font-weight:700;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line2)}
.pill[aria-pressed="true"]{background:#FFF6E5;border:3px solid var(--ink)}
.pill.dark[aria-pressed="true"]{background:var(--ink);color:#fff;border:1.5px solid var(--ink)}
.dot{width:20px;height:20px;border-radius:50%;border:1.5px solid #8A7E73;display:inline-block}

/* Generic blocks */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.grid{display:grid;gap:20px}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--ink);flex-shrink:0}
.status{margin:0;font-weight:700;color:var(--ok)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-weight:700}
.field input,.field select,.field textarea{min-height:48px;padding:0 14px;border-radius:12px;border:1.5px solid #CBBFB2;background:#fff;font-size:17px;color:var(--ink);min-width:0;width:100%}
.field textarea{padding:12px 14px;min-height:96px;resize:vertical}
.field .err{color:var(--warn);font-size:14px;font-weight:700}
.field input[aria-invalid="true"]{border-color:var(--warn)}
.range{display:grid;grid-template-columns:110px minmax(0,1fr) 52px;align-items:center;gap:10px}
.range input{width:100%;min-height:32px;accent-color:var(--ink)}
.range output{font-size:14px;color:var(--ink2);text-align:right}
.split{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.split > .form{flex:999 1 460px;min-width:0;display:flex;flex-direction:column;gap:26px}
.split > .preview{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;position:sticky;top:90px}
.kicker{margin:0;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#7A5212}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:800;font-size:18px;margin-bottom:12px;padding:0}
.photo{display:block;width:100%;object-fit:cover;border-radius:14px;box-shadow:0 10px 22px rgba(42,35,32,.14)}

/* Frames */
.frame{position:relative;width:100%}
.frame .win{position:absolute;background:#fff;overflow:hidden}
.frame .win > .inner{position:absolute;inset:0;container-type:inline-size;transform:scale(1.1)}
.frame .win img.crea{display:block;width:100%;height:100%}
.frame > img.border{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.shadow{filter:drop-shadow(0 14px 22px rgba(42,35,32,.2))}

/* Character picker */
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:12px;cursor:pointer;text-align:center;background:#fff;border:1.5px solid #E0D6CA}
.pick[aria-pressed="true"]{background:#FFF6E5;border:3px solid var(--ink)}
.pick img{width:100%;aspect-ratio:1535/2126;object-fit:cover;border-radius:4px;background:#fff}
.pick span{font-family:'Gel Pen Medium','Nunito',sans-serif;font-size:16px}

/* Cart */
.line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.line img{width:72px;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:#fff}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line2);border-radius:999px}
.qty button{width:36px;height:36px;border:0;background:none;font-size:18px;font-weight:800;cursor:pointer;border-radius:999px}
.qty span{min-width:24px;text-align:center;font-weight:800}
.totals{display:flex;flex-direction:column;gap:6px}
.totals div{display:flex;justify-content:space-between;gap:12px}
.totals .big{font-size:22px;font-weight:800;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}

/* Footer */
footer{border-top:1px solid var(--line);background:#fff;margin-top:24px}
footer .wrap{padding-top:24px;padding-bottom:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--ink2)}

@media (max-width:640px){
  .wrap{padding:0 16px}
  .brand{font-size:19px}
  .brand img{width:40px;height:40px}
  header.top{position:static}
  nav.main{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  nav.main a{white-space:nowrap;flex-shrink:0}
  nav.main a.cart{order:-1;margin-left:0}
  .split > .preview{position:static;order:-1}
  .range{grid-template-columns:90px minmax(0,1fr) 48px}
  .hide-sm{display:none}
}

/* Hero plein écran (accueil) */
@keyframes heroPan{0%{transform:perspective(1400px) rotateY(24deg) rotateX(2deg) translateX(-6%)}100%{transform:perspective(1400px) rotateY(-24deg) rotateX(-2deg) translateX(6%)}}
@keyframes heroShine{0%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
@keyframes heroWord{0%{transform:translate(-50%,-52%) translateX(3%)}100%{transform:translate(-50%,-52%) translateX(-3%)}}
@keyframes heroCue{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.hero{position:relative;height:calc(100vh - 70px);min-height:540px;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#FFFFFF 0%,#FBF7F2 70%)}
.hero-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:120px;transition:opacity 1.1s ease;opacity:0}
.hero-layer.on{opacity:1}
.hero-word{position:absolute;left:50%;top:46%;white-space:nowrap;font-family:'Gel Pen Medium','Nunito',sans-serif;font-size:clamp(84px,17vw,280px);line-height:1;letter-spacing:.02em;opacity:.92;animation:heroWord 7s ease-in-out infinite alternate}
.hero-frame{position:relative;z-index:1;width:clamp(230px,27vw,380px);animation:heroPan 7s ease-in-out infinite alternate;filter:drop-shadow(0 40px 50px rgba(42,35,32,.28))}
.hero-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-shine div{position:absolute;top:-10%;bottom:-10%;width:35%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);animation:heroShine 7s ease-in-out infinite alternate}
.hero-foot{position:absolute;left:0;right:0;bottom:28px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 16px}
.hero-dot{width:10px;height:10px;padding:0;border:0;border-radius:999px;cursor:pointer;background:#D8CDBF;transition:width .3s ease,background .3s ease}
.hero-dot[aria-pressed="true"]{width:28px}
.hero-cue{font-size:22px;color:#6B5E55;animation:heroCue 1.8s ease-in-out infinite}
@media (max-width:640px){.hero{height:calc(100vh - 110px)}.hero-layer{padding-bottom:150px}}
@media (prefers-reduced-motion:reduce){.hero-word,.hero-frame,.hero-shine div,.hero-cue{animation:none}}

/* Aperçu personnalisé : glisser / pincer */
#preview.editable{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}
#preview.editable [data-drag]{cursor:grab;touch-action:none}
#preview.editable [data-drag].sel{outline:2px dashed #B85F42;outline-offset:2px;border-radius:4px}
.rs-handle{position:absolute;display:none;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#B85F42;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:nwse-resize;touch-action:none;z-index:3}
.adj-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.adj-bar .pill{min-width:44px;justify-content:center;font-size:17px}
.adj-hint{margin:0;font-size:14px;color:#4A3F38;text-align:center;max-width:420px}
@media (pointer:coarse){.rs-handle{width:34px;height:34px;margin:-17px 0 0 -17px}}

/* Caractère personnalisé sur mobile : ourson, cadre, prénom, puis aperçu, puis panier */
@media (max-width:640px){
  .perso-split{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:26px}
  .perso-split > .form{display:contents}
  .perso-split > .form > *{order:1}
  .perso-split > .preview{order:2}
  .perso-split > .form > .m-last{order:3}
}

/* Bouton panier flottant (mobile) */
.cart-fab{display:none}
@media (max-width:640px){
  .cart-fab{display:flex;position:fixed;right:16px;bottom:16px;z-index:20;width:60px;height:60px;border-radius:50%;align-items:center;justify-content:center;background:#B85F42;color:#fff;box-shadow:0 8px 20px rgba(42,35,32,.3);text-decoration:none}
  .cart-fab:hover,.cart-fab:focus{color:#fff}
  .cart-fab.hidden{display:none}
  .cart-fab-count{position:absolute;top:-4px;right:-4px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#2A2320;color:#fff;font-size:13px;font-weight:800;align-items:center;justify-content:center;border:2px solid #fff;box-sizing:border-box}
  footer{padding-bottom:80px}
}

.hero-frame.hero-video{animation:none;width:clamp(250px,31vw,430px);filter:drop-shadow(0 30px 40px rgba(42,35,32,.22))}
.hero-video img{display:block;width:100%;height:auto}
@media (max-width:760px){
  .xl-detail,.xl-size{grid-template-columns:1fr !important;gap:22px !important}
  .xl-size{padding:22px !important}
  .xl-size img{order:-1}
}
/* Photos d'ambiance (Caractère original) */
.amb{position:relative;width:100%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:0 12px 24px rgba(42,35,32,.16)}
.amb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.amb-mock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10% 13% 18%;background:#F3EEE7;opacity:0;transition:opacity .35s ease}
.amb.on .amb-mock{opacity:1}
@media (hover:hover){.amb:hover .amb-mock{opacity:1}}
.amb-btn{position:absolute;left:10px;bottom:10px;min-height:40px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.94);color:#2A2320;font:inherit;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 4px 10px rgba(42,35,32,.18)}
.add-link{align-self:flex-start;min-height:40px;padding:0;border:0;background:none;color:#9A4A2F;font:inherit;font-weight:800;font-size:17px;cursor:pointer;text-align:left}
.add-link:hover{text-decoration:underline}

/* Filet bleu blanc rouge sur le bouton Panier du haut */
nav.main a.cart{background:linear-gradient(90deg,#0055A4 0 33.3%,#FFFFFF 33.3% 66.6%,#EF4135 66.6% 100%) center bottom/100% 4px no-repeat,var(--ink);overflow:hidden}
nav.main a.cart[aria-current="page"]{background:linear-gradient(90deg,#0055A4 0 33.3%,#FFFFFF 33.3% 66.6%,#EF4135 66.6% 100%) center bottom/100% 4px no-repeat,var(--terra)}