/* base */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
input[type=password]{width:100%;background:var(--coal);color:var(--bone);border:1.5px solid var(--coal-3);border-radius:10px;padding:12px;font:16px var(--body)}

/* Layout : app mobile une colonne, fond charbon, rouge du taureau, carton vert/rouge comme fil conducteur ; barre d'onglets avec bouton Réserver central */
:root{
  --coal:#1e1814; --coal-2:#2a221c; --coal-3:#3a2f27;
  --bone:#f6eee4; --ash:#b9aa9a;
  --bull:#c8372d; --ember:#f08a3c; --verde:#2f9a5c;
  --sign:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --script:"Yellowtail", "Brush Script MT", cursive;
  --body:"Figtree", system-ui, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--coal);color:var(--bone);font-family:var(--body);font-size:16px;line-height:1.5;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--coal)}
.wrap{max-width:480px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 120px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.sign{font-family:var(--sign);font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.script{font-family:var(--script);font-weight:400;color:var(--bull)}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);font-weight:700}
.muted{color:var(--ash)}
.ex{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);border:1px solid currentColor;border-radius:4px;padding:1px 6px;vertical-align:middle}
.view{display:flex;flex-direction:column;gap:34px;padding-top:14px}
.brush{display:block;width:70%;max-width:100%;height:auto;margin:-4px 0 0}
section h2.sign{font-size:34px}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:var(--coal);padding-block:10px;border-bottom:1px solid var(--coal-3)}
.toprow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--bone)}
.top img{width:34px;height:auto}
.top .brand span{font-family:var(--script);font-size:24px}
.points{font:700 13px var(--body);color:var(--bone);background:var(--coal-2);border:1px solid var(--coal-3);border-radius:999px;padding:6px 12px;text-decoration:none;font-variant-numeric:tabular-nums}
.points b{color:var(--bull)}

/* hero */
.hero{position:relative;text-align:center;padding-block:18px 6px;isolation:isolate}
.hero::before{content:"";position:absolute;left:50%;top:44%;width:320px;height:320px;max-width:100%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(240,138,60,.28),rgba(200,55,45,.12) 45%,transparent 70%);z-index:-1;border-radius:50%}
.hero img{width:78%;max-width:340px;height:auto}
.hero .tag{font-size:44px;margin-top:18px}
.hero .tag em{font-style:normal;color:var(--bull)}
@media (prefers-reduced-motion:no-preference){.hero::before{animation:braise 3.2s ease-in-out infinite alternate}@keyframes braise{from{opacity:.65;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:15px 20px;font:700 16px var(--body);cursor:pointer;text-decoration:none;color:#fff;background:var(--bull);width:100%}
.btn.line{background:transparent;border:1.5px solid var(--coal-3);color:var(--bone)}
.btn.green{background:var(--verde)}
.btn:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* le carton */
.carton-wrap{perspective:900px}
.carton{position:relative;width:100%;aspect-ratio:1.6;max-width:100%;border:0;padding:0;background:none;cursor:pointer;transition:transform .16s ease-in}
.carton.turning{transform:scaleX(0)}
.carton .face.r{display:none}
.carton.flip .face.r{display:flex}
.carton.flip .face.v{display:none}
.face{position:absolute;inset:0;border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;padding:20px;text-align:left;color:#fff;overflow:hidden}
.face::after{content:"";position:absolute;right:-30px;bottom:-40px;width:180px;height:180px;background:var(--bull-img) center/contain no-repeat;opacity:.16;filter:brightness(0) invert(1)}
.face.v{background:linear-gradient(140deg,#37ad69,#1f7444)}
.face.r{background:linear-gradient(140deg,#d8473b,#9b231b)}
.face .big{font-family:var(--sign);font-weight:900;font-size:54px;line-height:.9;text-transform:uppercase}
.face .small{font-size:15px;max-width:26ch;position:relative;z-index:1}
.face .hint{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.carton-cap{display:flex;flex-direction:column;gap:8px}

/* broches carousel */
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.rail::-webkit-scrollbar{display:none}
.skewer{flex:0 0 150px;scroll-snap-align:start;background:var(--coal-2);border:1px solid var(--coal-3);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.skewer svg{width:100%;height:56px}
.skewer b{font-family:var(--sign);font-size:24px;text-transform:uppercase;line-height:1}
.skewer small{color:var(--ash);font-size:13px;line-height:1.3}

button.skewer,button.cut{font:inherit;color:inherit;text-align:left;cursor:pointer}
button.skewer:hover,button.cut:hover{border-color:var(--bull)}
.tapme{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bull);font-weight:700;margin-top:auto}
/* fiche morceau */
.sheet-bg{position:fixed;inset:0;background:rgba(10,7,5,.72);z-index:20;display:none;align-items:flex-end;justify-content:center}
.sheet-bg.open{display:flex}
.sheet{width:100%;max-width:480px;background:var(--coal-2);border-top:2px solid var(--bull);border-radius:20px 20px 0 0;padding-block:20px calc(22px + env(safe-area-inset-bottom,0px));padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:12px;max-height:92%;overflow-y:auto}
.sheet .grab{width:44px;height:4px;border-radius:2px;background:var(--coal-3);align-self:center}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sheet-head h2{font-family:var(--sign);font-size:42px;text-transform:uppercase;line-height:.95}
.close{background:var(--bull);border:0;color:#fff;border-radius:50%;width:44px;height:44px;font-size:26px;line-height:1;cursor:pointer;flex:none}
.beef{width:100%;height:auto;display:block}
.beef .zone{fill:var(--coal-3);stroke:var(--coal-2);stroke-width:2.5;cursor:pointer;transition:fill .25s}
.beef .zone.other{fill:#2f2620;cursor:default}
.beef .zone:not(.other):hover{fill:#5a3a30}
.beef .zone.hit{fill:var(--bull)}
.beef .lbl{font:700 12px var(--body);fill:#fff;pointer-events:none;text-transform:uppercase;letter-spacing:.04em;display:none}
.beef .lbl.hit{display:inline}
@media (prefers-reduced-motion:no-preference){.beef .zone.hit{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{fill:#e0594d}}}
.animal{display:flex;align-items:center;gap:14px;background:var(--coal);border-radius:14px;padding:18px}
.animal .sign{font-size:40px;color:var(--bull)}
/* carte */
.formules{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.formule{background:var(--coal-2);border:1px solid var(--coal-3);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.formule.star{border-color:var(--bull);background:linear-gradient(160deg,#3a1a15,var(--coal-2))}
.formule .f-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.formule b{font-family:var(--sign);font-size:26px;text-transform:uppercase;line-height:1}
.formule > small{color:var(--ash);font-size:14px;line-height:1.4}
.price{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;color:var(--bone)}
.price.big{font-family:var(--sign);font-size:26px;color:var(--bull)}
.price small{font-size:13px;color:var(--ash);font-family:var(--body)}
h3.sub{font-family:var(--sign);font-size:22px;text-transform:uppercase;margin:20px 0 4px;color:var(--ash);display:flex;justify-content:space-between;align-items:baseline}
h3.sub span{font:500 12px var(--body);text-transform:none;letter-spacing:0}
.plats{display:flex;flex-direction:column}
.plat{border-top:1px dashed var(--coal-3)}
.plat:last-child{border-bottom:1px dashed var(--coal-3)}
.plat summary{list-style:none;display:flex;justify-content:space-between;gap:12px;padding-block:13px;cursor:pointer}
.plat summary::-webkit-details-marker{display:none}
.pl-n{min-width:0;display:flex;flex-direction:column}
.pl-n b{font-size:17px}
.pl-n b::after{content:" +";color:var(--bull);font-weight:700}
.plat[open] .pl-n b::after{content:" −"}
.pl-n small{color:var(--ash);font-size:14px;line-height:1.35}
.story{margin:0 0 14px;padding:12px 14px;border-left:3px solid var(--bull);background:var(--coal-2);border-radius:0 10px 10px 0;font-size:15px;line-height:1.55}
/* actus */
.news{display:flex;flex-direction:column}
.news article{display:grid;grid-template-columns:64px 1fr;gap:14px;padding-block:14px;border-top:1px solid var(--coal-3)}
.news article:last-child{border-bottom:1px solid var(--coal-3)}
.news .date{font-family:var(--sign);font-weight:900;font-size:30px;line-height:.9;color:var(--bull);text-transform:uppercase}
.news .date small{display:block;font-size:13px;color:var(--ash);letter-spacing:.06em}
.news h3{font-size:16px;margin-bottom:2px}
.news p{font-size:14px;color:var(--ash)}
.news div{min-width:0}

.gift{border-radius:16px;padding:22px;background:repeating-linear-gradient(-45deg,var(--coal-2) 0 14px,#251d18 14px 28px);border:1.5px dashed var(--bull);display:flex;flex-direction:column;gap:12px}
.gift .sign{font-size:34px}

/* réserver */
.picker{display:flex;flex-direction:column;gap:20px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{background:var(--coal-2);border:1.5px solid var(--coal-3);color:var(--bone);border-radius:10px;padding:12px 16px;font:700 16px var(--body);cursor:pointer;min-width:58px}
.choice[aria-pressed=true]{border-color:var(--bull);background:#3a1a15}
.summary{font-family:var(--sign);font-size:30px;text-transform:uppercase;line-height:1}
.summary em{font-style:normal;color:var(--bull)}
.panel{background:var(--coal-2);border:1px solid var(--coal-3);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.copy{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copy code{font:700 15px var(--body);user-select:all;background:var(--coal);padding:8px 10px;border-radius:8px}
.copy button{background:none;border:1px solid var(--coal-3);color:var(--bone);border-radius:8px;padding:8px 12px;cursor:pointer;font:600 13px var(--body)}

/* passeport */
.passport{position:relative;border-radius:18px;padding:22px;background:linear-gradient(160deg,#5b1a14,#2b130f 70%);border:1px solid #6e2a22;overflow:hidden;display:flex;flex-direction:column;gap:18px}
.passport::after{content:"";position:absolute;right:-50px;top:-30px;width:220px;height:220px;background:var(--bull-img) center/contain no-repeat;opacity:.12}
.passport .head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;position:relative;z-index:1}
.passport .name{font-family:var(--script);font-size:34px;line-height:1}
.passport .lvl{text-align:right}
.passport .lvl b{display:block;font-family:var(--sign);font-size:26px;text-transform:uppercase;line-height:1}
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative;z-index:1}
.stamp{aspect-ratio:1;max-width:100%;border-radius:50%;border:1.5px dashed rgba(246,238,228,.25);display:grid;place-items:center;text-align:center;font:700 10px/1.1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:rgba(246,238,228,.4);padding:4px}
.stamp.on{border:2.5px double var(--bone);color:var(--bone);background:rgba(200,55,45,.55)}
.bar{height:8px;background:rgba(0,0,0,.35);border-radius:4px;overflow:hidden;position:relative;z-index:1}
.bar i{display:block;height:100%;width:58%;background:linear-gradient(90deg,var(--bull),var(--ember))}
.ladder{display:flex;flex-direction:column}
.rung{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding-block:12px;border-top:1px solid var(--coal-3)}
.rung .n{font-family:var(--sign);font-weight:900;font-size:30px;color:var(--ash);font-variant-numeric:tabular-nums}
.rung.done .n{color:var(--bull)}
.rung b{display:block}
.rung small{color:var(--ash)}
.rung .st{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.rung.done .st{color:var(--verde)}
.qr{width:150px;height:150px;border-radius:10px;background:#fff;padding:10px;align-self:center}
.qr div{width:100%;height:100%;background:conic-gradient(#111 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/20% 20%}

/* forms */
label{font-size:13px;color:var(--ash);display:block;margin-bottom:6px;font-weight:500}
input[type=text],input[type=email],input[type=date],input[type=tel],input[type=search],textarea{width:100%;background:var(--coal);color:var(--bone);border:1.5px solid var(--coal-3);border-radius:10px;padding:12px;font:16px var(--body)}
textarea{min-height:110px;resize:vertical}
.field{display:flex;flex-direction:column}
form{display:flex;flex-direction:column;gap:14px}
.consent{display:flex;gap:10px;align-items:flex-start;color:var(--bone);font-size:14px}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--bull)}
.ok{font-family:var(--script);font-size:30px;color:var(--verde)}

/* carte : tour des broches */
.cuts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cut{background:var(--coal-2);border:1px solid var(--coal-3);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cut svg{width:100%;height:40px}
.cut b{font-family:var(--sign);font-size:22px;text-transform:uppercase;line-height:1.05}
.cut small{color:var(--ash);font-size:13px;line-height:1.3}
.tour{list-style:none;margin:0;padding:0;position:relative}
.tour::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:3px;background:linear-gradient(var(--bull),var(--ember));border-radius:2px}
.tour li{display:grid;grid-template-columns:42px 1fr;gap:14px;padding-block:10px;position:relative}
.tour .dot{width:42px;height:42px;border-radius:50%;background:var(--coal);border:3px solid var(--bull);display:grid;place-items:center;font-family:var(--sign);font-weight:900;font-size:18px;font-variant-numeric:tabular-nums}
.tour b{font-family:var(--sign);font-size:24px;text-transform:uppercase;line-height:1.1;display:block}
.tour small{color:var(--ash)}
.tour div{min-width:0}
.dish{display:flex;justify-content:space-between;gap:12px;padding-block:12px;border-top:1px dashed var(--coal-3)}
.dish div{min-width:0}
.dish b{display:block}
.dish small{color:var(--ash)}

/* avis */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mini{min-width:0;overflow:hidden}
.mini .big{font-size:clamp(18px,6.2vw,34px)!important;white-space:nowrap}
.mini{aspect-ratio:.8;max-width:100%;border:0;border-radius:14px;color:#fff;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding:16px;text-align:left;transition:transform .2s}
.mini .big{font-family:var(--sign);font-weight:900;font-size:34px;line-height:.9;text-transform:uppercase}
.mini span{font-size:14px}
.mini.v{background:linear-gradient(140deg,#37ad69,#1f7444)}
.mini.r{background:linear-gradient(140deg,#d8473b,#9b231b)}
.mini[aria-pressed=true]{outline:3px solid var(--bone);outline-offset:3px}
.mini[aria-pressed=false].dim{opacity:.45}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--coal);border:1.5px solid var(--coal-3);color:var(--bone);border-radius:999px;padding:8px 14px;font:500 14px var(--body);cursor:pointer}
.chip[aria-pressed=true]{border-color:var(--bull);color:#fff;background:#3a1a15}
.preview{border-radius:12px;overflow:hidden}
.preview img{display:block;width:100%}
.upload{display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px dashed var(--coal-3);border-radius:12px;padding:22px;color:var(--ash);cursor:pointer;text-align:center}
.upload input{position:absolute;opacity:0;width:1px;height:1px}

/* nouveautés */
.todo{display:inline-block;font:700 10px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ember);border:1px dashed var(--ember);border-radius:4px;padding:2px 6px}
.infos{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.info{background:var(--coal-2);border:1px solid var(--coal-3);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.hours{display:flex;flex-direction:column}
.hours div{display:flex;justify-content:space-between;gap:12px;padding-block:6px;border-bottom:1px dashed var(--coal-3)}
.hours div:last-child{border-bottom:0}
.hours span{color:var(--ash)}
.hours b{font-variant-numeric:tabular-nums;text-align:right}
.hours .closed b{color:var(--ash);font-weight:500}
.ev{display:flex;align-items:center;gap:8px;font-weight:600}
.ev svg{width:20px;height:20px;fill:var(--verde);flex:none}
.alg{display:flex;flex-wrap:wrap;gap:8px}
.alg span{border:1px solid var(--coal-3);background:var(--coal-2);border-radius:999px;padding:6px 12px;font-size:13px}
.wall{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mestre{background:linear-gradient(160deg,#3a1a15,var(--coal-2));border:1px solid #6e2a22;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.mestre .m-ic{width:40px;height:40px;border-radius:50%;background:var(--coal);display:grid;place-items:center;font:900 20px var(--sign);color:var(--ash);margin-bottom:4px}
.mestre .m-ic img{width:28px}
.mestre b{font-family:var(--script);font-size:26px;font-weight:400;line-height:1.1}
.mestre small{color:var(--ash);font-size:12px}
.mestre.next{background:transparent;border:1.5px dashed var(--coal-3)}
.mail{background:#f6eee4;color:#2a221c;border-radius:14px;overflow:hidden}
.mail-h{display:flex;flex-direction:column;gap:2px;padding:12px 16px;background:#e9dccd;font-size:13px}
.mail-b{padding:18px 16px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.mail-b .muted{color:#6b5a4b}
/* broches & accompagnements */
.cut{position:relative}
.cut .fam{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);font-weight:700}
.cut b{font-size:26px!important}
.accs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acc{background:var(--coal-2);border:1px solid var(--coal-3);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.acc b{font-family:var(--sign);font-size:22px;text-transform:uppercase;line-height:1.05}
.acc span{font-size:14px;font-weight:600}
.acc small{color:var(--ash);font-size:13px;line-height:1.35;margin-top:4px}
#famF .chip{background:var(--coal-2)}
/* bouton photo */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:9;display:flex;align-items:center;gap:8px;background:var(--bone);color:var(--coal);border:0;border-radius:999px;padding:12px 16px 12px 12px;font:700 14px var(--body);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;max-width:100%}
#pTitle{font-family:var(--sign);font-size:42px;text-transform:uppercase;line-height:.95}
.fab svg{width:24px;height:24px;stroke:var(--bull);fill:none;stroke-width:2}
.first{list-style:none;margin:0;padding:0;counter-reset:f}
.first li{counter-increment:f;display:grid;grid-template-columns:44px 1fr;gap:4px 12px;padding-block:12px;border-top:1px solid var(--coal-3)}
.first li::before{content:counter(f);grid-row:span 2;font-family:var(--sign);font-weight:900;font-size:34px;line-height:1;color:var(--bull)}
.first b{font-size:16px}
.first small{color:var(--ash);font-size:14px;line-height:1.4}
.toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:12px;border-top:1px solid var(--coal-3);cursor:pointer}
.toggle span{display:flex;flex-direction:column;min-width:0}
.toggle small{color:var(--ash);font-size:13px}
.toggle input{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:28px;border-radius:999px;background:var(--coal-3);position:relative;cursor:pointer;transition:background .2s;margin:0}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--bone);transition:transform .2s}
.toggle input:checked{background:var(--verde)}
.toggle input:checked::after{transform:translateX(18px)}
.notif{display:flex;gap:12px;align-items:flex-start;background:rgba(246,238,228,.94);color:#2a221c;border-radius:16px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.notif img{width:36px;height:36px;border-radius:9px;background:var(--coal);padding:4px;flex:none}
.notif div{min-width:0;display:flex;flex-direction:column;font-size:14px;line-height:1.35}
.notif small{color:#6b5a4b;font-size:12px}
.code{font-family:var(--sign);font-weight:900;font-size:40px;letter-spacing:.06em;color:var(--bone)}
/* patron */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi{background:var(--coal-2);border:1px solid var(--coal-3);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi b{font-family:var(--sign);font-weight:900;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.kpi small{color:var(--ash);font-size:12px;line-height:1.25}
.kpi.alert{border-color:var(--bull)}
.kpi.alert b{color:var(--bull)}
.msgs{display:flex;flex-direction:column}
.msg{display:grid;grid-template-columns:6px 1fr;gap:12px;padding-block:12px;border-top:1px solid var(--coal-3)}
.msg i{background:var(--bull);border-radius:3px}
.msg > div{min-width:0;display:flex;flex-direction:column;gap:6px}
.msg .tags{display:flex;gap:6px;flex-wrap:wrap}
.msg .tags span{font-size:11px;border:1px solid var(--coal-3);border-radius:999px;padding:2px 8px;color:var(--ash)}
.msg small{color:var(--ash);font-size:12px}
.msg.done i{background:var(--verde)}
.msg button{align-self:flex-start;background:none;border:1px solid var(--coal-3);color:var(--bone);border-radius:8px;padding:6px 10px;font:600 12px var(--body);cursor:pointer}
.phgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ph{aspect-ratio:1;max-width:100%;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-end;padding:8px;font-size:11px;color:#fff;position:relative;overflow:hidden}
.ph button{position:absolute;top:6px;right:6px;border:0;border-radius:999px;font:700 11px var(--body);padding:4px 8px;cursor:pointer;background:var(--bone);color:var(--coal)}
.ph button[aria-pressed=true]{background:var(--verde);color:#fff}
select{width:100%;background:var(--coal);color:var(--bone);border:1.5px solid var(--coal-3);border-radius:10px;padding:12px;font:16px var(--body)}
.who{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-block:10px;border-top:1px solid var(--coal-3)}
.who div{min-width:0;display:flex;flex-direction:column}
.who small{color:var(--ash);font-size:12px}
.who button{background:var(--bull);color:#fff;border:0;border-radius:8px;padding:8px 12px;font:700 13px var(--body);cursor:pointer;flex:none}
.double{margin-top:12px;background:#3a1a15;border:1px solid var(--bull);border-radius:12px;padding:12px 14px;font-size:15px}
.double b{color:#fff}
/* réseaux */
.socs{display:flex;flex-direction:column}
.soc{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding-block:12px;border-top:1px solid var(--coal-3)}
.soc-ic{width:44px;height:44px;border-radius:12px;background:var(--coal);display:grid;place-items:center}
.soc-ic svg{width:22px;height:22px;stroke:var(--bull);fill:none;stroke-width:1.8;stroke-linejoin:round}
.soc-t{min-width:0;display:flex;flex-direction:column}
.soc-t b{font-family:var(--sign);font-size:22px;text-transform:uppercase;line-height:1.05}
.soc-t small{color:var(--ash);font-size:13px;line-height:1.3}
.soc-b{background:var(--verde);color:#fff;text-decoration:none;font:700 13px var(--body);border-radius:999px;padding:9px 14px;white-space:nowrap}
.cap{background:var(--coal);border:1px dashed var(--coal-3);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.cap button{align-self:flex-start;background:none;border:1px solid var(--coal-3);color:var(--bone);border-radius:8px;padding:8px 12px;cursor:pointer;font:600 13px var(--body)}
/* tabs : barre en bas, Rodizio au centre */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:8;background:#140f0c;border-top:1px solid var(--coal-3);padding-left:max(6px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs .in{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);align-items:end}
.tab{background:none;border:0;color:var(--ash);font:600 11px var(--body);padding:10px 2px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-width:0}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.tab[aria-current=true]{color:var(--bone)}
.tab[aria-current=true] svg{stroke:var(--bull)}
.tab.center .disc{width:60px;height:60px;margin-top:-24px;border-radius:50%;background:var(--bull);display:grid;place-items:center;box-shadow:0 0 0 5px #140f0c}
.tab.center[aria-current=true] .disc{background:#e04538}
.tab.center img{width:40px;height:auto;filter:brightness(0) invert(1)}
@media (prefers-reduced-motion:no-preference){.view{animation:up .3s ease}@keyframes up{from{transform:translateY(8px)}to{transform:none}}}
@media (prefers-reduced-motion:reduce){.carton{transition:none}}

/* appli réelle */
.foot{text-align:center;color:var(--ash);font-size:12px;display:flex;flex-direction:column;gap:6px;padding-block:8px}
.foot a{color:var(--ash)}
.err{color:#ff9b8f;font-size:14px}
.btn[disabled]{opacity:.6;cursor:wait}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.soon{display:inline-block;font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--bull);border-radius:999px;padding:4px 10px}
html{scroll-behavior:auto}

/* menu */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.jump a{background:var(--coal-2);border:1px solid var(--coal-3);color:var(--bone);text-decoration:none;border-radius:999px;padding:8px 14px;font:600 14px var(--body)}
.plat-row{display:flex;justify-content:space-between;gap:12px;padding-block:13px}
.pl-n b.nostory::after{content:none}
section[id^="m-"]{scroll-margin-top:80px}

/* passeport phase 2 */
.howto{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:#e6dccf;font-size:15px}
.rung.done .st::after{content:"Obtenu";color:var(--verde)}
.rung.next .st::after{content:"Prochain"}
.stamp-toast{display:flex;align-items:center;gap:16px;background:linear-gradient(140deg,#37ad69,#1f7444);border-radius:16px;padding:18px 20px;color:#fff}
.stamp-toast .sign{font-size:56px;line-height:.9}
.stamp-toast div{display:flex;flex-direction:column;gap:2px;min-width:0}
.stamp-toast b{font-size:18px}
.stamp-toast small{font-size:14px;opacity:.95}
.stamp-toast.bad{background:linear-gradient(140deg,#d8473b,#9b231b)}
@media (prefers-reduced-motion:no-preference){.stamp-toast{animation:pop .5s cubic-bezier(.3,1.5,.5,1)}@keyframes pop{from{transform:scale(.8)}to{transform:none}}}
.wall .empty{grid-column:1/-1;color:var(--ash);font-size:14px}