/* Taplinks — two themes share one layout:
   .t-boutique  (Sarpo): burgundy hero, thin gold frame, Prata display serif
   .t-atelier   (Basic): graphite hero on linen, dashed "stitch" lines, Montserrat display */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--focus,#2b6cb0);outline-offset:3px}

.t-boutique{--gold:#c8a86a;--line:var(--gold);--display:Prata,Georgia,serif;--display-size:40px;--display-track:.08em;--surface:#ffffff;--muted:#7a5560;--focus:#c8a86a}
.t-atelier{--line:rgba(255,255,255,.45);--display:Montserrat,Manrope,sans-serif;--display-size:30px;--display-track:.06em;--surface:#fbf7f2;--muted:#7b7368;--focus:#3f434a}

/* ---------- hero ---------- */
.hero{background:var(--brand);color:var(--on-brand);text-align:center;padding:44px 24px 76px;position:relative}
.t-boutique .hero::after{content:"";position:absolute;inset:10px 10px 0;border:1px solid var(--gold);border-bottom:0;border-radius:18px 18px 0 0;opacity:.7;pointer-events:none}
.t-atelier .hero::after{content:"";position:absolute;left:14px;right:14px;bottom:44px;border-top:1.5px dashed var(--line)}
.mark{position:relative;width:104px;height:104px;margin:0 auto 18px;border-radius:50%;background:var(--on-brand);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.t-boutique .mark{box-shadow:0 0 0 1px var(--gold),0 0 0 6px var(--brand),0 0 0 7px var(--gold)}
.mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--on-brand)}
.t-atelier .mark img{object-fit:cover}
.mark-letter{font:400 46px/1 var(--display);color:var(--brand)}
.name{margin:0;font:400 var(--display-size)/1.1 var(--display);letter-spacing:var(--display-track)}
.t-atelier .name{font-weight:700}
.motto{margin:8px 0 0;font-size:15px;opacity:.9}
.t-boutique .motto{font-style:italic;font-family:Georgia,serif;color:var(--gold);opacity:1}

/* ---------- layout ---------- */
.wrap{max-width:520px;margin:-48px auto 0;padding:0 16px 48px;position:relative;display:flex;flex-direction:column;gap:12px}
.card{background:var(--surface);color:#2a2326;border-radius:20px;padding:22px 20px;box-shadow:0 1px 2px rgba(40,10,20,.06),0 12px 32px -12px rgba(40,10,20,.25)}
.t-atelier .card{color:#33363b;box-shadow:0 1px 2px rgba(60,50,40,.06),0 14px 30px -14px rgba(60,50,40,.35)}

/* ---------- review (the hero moment) ---------- */
.review{text-align:center}
.review-h{margin:0 0 14px;font:600 17px/1.35 Manrope,sans-serif;color:var(--brand)}
.t-boutique .review-h{font:400 20px/1.3 var(--display);letter-spacing:.01em}
.stars{border:0;margin:0;padding:0;display:flex;flex-direction:row-reverse;justify-content:center;gap:4px}
.stars input{position:absolute;opacity:0;pointer-events:none}
.stars label{cursor:pointer;padding:4px;border-radius:10px;-webkit-tap-highlight-color:transparent}
.stars svg{width:42px;height:42px;display:block;fill:#e6dfe1;transition:fill .15s,transform .15s}
.t-atelier .stars svg{fill:#e3dcd2}
.stars label:hover svg,.stars label:hover~label svg,.stars input:checked~label svg{fill:#f2b01e}
.stars input:checked+label svg{transform:scale(1.12)}
.stars input:focus-visible+label{outline:2px solid var(--focus);outline-offset:0}
.stars-hint{margin:6px 0 0;font-size:13px;color:var(--muted)}
.review.open .stars-hint{display:none}

.more{text-align:left;margin-top:14px;padding-top:16px;border-top:1px solid #eee3e5;animation:unfold .3s ease-out}
.t-atelier .more{border-top:1.5px dashed #d9cfc2}
@keyframes unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lbl{display:block;margin:0 0 6px;font-size:13px;font-weight:600}
.lbl+select,.lbl+textarea{margin-bottom:14px}
.more select,.more textarea,.more input{width:100%;font:inherit;font-size:16px;color:#222;padding:12px 14px;border:1px solid #ddd2d5;border-radius:12px;background:#fff;appearance:none;-webkit-appearance:none}
.t-atelier .more select,.t-atelier .more textarea,.t-atelier .more input{border-color:#ddd3c6}
.more select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px;padding-right:40px}
.more textarea{resize:vertical;min-height:96px}
.more select:focus,.more textarea:focus,.more input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{margin:6px 2px 0;font-size:12px;color:var(--muted)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.err{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#fdecee;color:#9b1c2e;font-size:13px}
.send{margin-top:16px;width:100%;padding:15px;border:0;border-radius:14px;background:var(--brand);color:var(--on-brand);font:700 15px Manrope,sans-serif;cursor:pointer}
.send:disabled{opacity:.6;cursor:progress}
.done{padding:6px 0 2px}
.done svg{width:52px;height:52px;fill:none;stroke:var(--on-brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;background:var(--brand);border-radius:50%;padding:12px}
.done p{margin:10px 0 0;font-size:15px}
.done b{font-size:18px;color:var(--brand)}

/* ---------- buttons ---------- */
.btn{display:flex;align-items:center;gap:14px;text-decoration:none;border-radius:16px;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.btn:active{transform:scale(.98)}
.btn .ic svg{width:24px;height:24px;display:block}
.primary{background:var(--brand);color:var(--on-brand);padding:16px 18px;min-height:72px;position:relative}
.primary .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);flex:none}
.primary .tx{flex:1;display:flex;flex-direction:column;line-height:1.3}
.primary .tx b{font-size:16px;font-weight:700}
.primary .tx small{font-size:13px;opacity:.8}
.primary .go svg{width:22px;height:22px;display:block}
.t-boutique .primary{box-shadow:inset 0 0 0 1px rgba(200,168,106,.6)}
.t-boutique .primary .ic{color:var(--gold);background:rgba(200,168,106,.14)}
.t-atelier .primary::after,.t-atelier .social::after{content:"";position:absolute;inset:5px;border:1.5px dashed var(--line);border-radius:12px;pointer-events:none}

.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px}
.social{position:relative;justify-content:center;gap:10px;padding:16px 12px;min-height:58px;background:var(--surface);color:var(--brand);box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 20px -14px rgba(0,0,0,.35)}
.social b{font-weight:700;font-size:15px}
.t-boutique .social{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent)}
.t-atelier .social{--line:#cfc3b3}

/* ---------- branches ---------- */
.branches{padding:20px 8px 8px 20px}
.branches-h{margin:0 0 6px;font:700 15px Manrope,sans-serif;color:var(--brand)}
.t-boutique .branches-h{font:400 20px var(--display)}
.branches ul{list-style:none;margin:0;padding:0}
.branch{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 0;border-top:1px solid #f0e6e8}
.t-atelier .branch{border-top:1.5px dashed #e3d9cc}
.branches li:first-child{border-top:0}
.branch-info{flex:1;min-width:0;display:flex;flex-direction:column}
.branch-info b{font-size:15px;font-weight:700;color:#2a2326}
.branch-info span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.branch-act{display:flex;gap:8px}
.branch-act a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent);transition:background .15s}
.branch-act a:hover{background:color-mix(in srgb,var(--brand) 16%,transparent)}
.branch-act svg{width:20px;height:20px}

.note{text-align:center;font-size:13px;color:var(--muted);margin:12px 12px 0}
.t-boutique .note{color:var(--brand);opacity:.75}

@media (max-width:360px){.pair{grid-template-columns:1fr}.stars svg{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}