/* Inu'Neko — Carte membre interactive du Club (charte v1.2)
   Orange #DE6523 · Orange foncé #B94F15 · Brun #5C3A21 · Brun doux #6E5442 · Crème carte #F4EBDC
   Jost (texte, titres de carte) · Cormorant Garamond italique (touches manuscrites, prix).
   La carte reprend le format des cartes papier (1050 × 600, soit 1,75:1) et se met à l'échelle
   avec des unités de conteneur (cqw) : tout reste proportionné, du téléphone à l'écran large. */

.cm-pile{display:grid;gap:2.2rem;margin:1rem 0 2rem}
.cm{--o:#DE6523;--of:#B94F15;--b:#5C3A21;--bd:#6E5442;--c:#F4EBDC;--c2:#EDE1CF;
  width:100%;max-width:560px;font-family:"Jost",Verdana,Arial,sans-serif;color:var(--b)}
.cm-scene{container-type:inline-size;perspective:1600px;aspect-ratio:1050/600;width:100%}
.cm-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.cm.is-verso .cm-flip{transform:rotateY(180deg)}
.cm-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  background:var(--c);border-radius:4.2cqw;box-shadow:0 1px 2px rgba(92,58,33,.12),0 14px 34px rgba(92,58,33,.18);
  font-size:3.1cqw;line-height:1.25}
.cm-face::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 .25cqw rgba(92,58,33,.10);
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.35),transparent 55%)}
.cm-verso{transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){
  .cm-flip{transition:none}
  .cm.is-verso .cm-flip{transform:none}
  .cm-verso{transform:none;opacity:0;visibility:hidden}
  .cm.is-verso .cm-verso{opacity:1;visibility:visible}
  .cm.is-verso .cm-recto{visibility:hidden}
}

/* ---------- RECTO ---------- */
.cm-logo{position:absolute;left:4.6cqw;top:4.6cqw;width:24.5cqw;height:auto;display:block}
.cm-titre{position:absolute;left:5.4cqw;top:15cqw;width:58cqw;margin:0;font-weight:700;letter-spacing:-.02em;
  font-size:6.6cqw;line-height:1.02;color:var(--b)}
.cm-titre em{font-style:normal;color:var(--o)}
.cm-titre.cm-long{font-size:5.9cqw}
.cm-niveau{display:inline-block;margin-left:.6cqw;padding:.45cqw 1.8cqw;border-radius:99px;background:var(--o);color:#fff;
  font-size:2.3cqw;font-weight:600;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.cm-pinceau{position:absolute;left:3.4cqw;top:29.5cqw;width:50cqw;padding:1.6cqw 3cqw 1.9cqw;text-align:center;color:#fff;
  font-size:2.75cqw;line-height:1.35;z-index:2}
.cm-pinceau::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bd);
  clip-path:polygon(1% 14%,6% 4%,14% 9%,22% 2%,35% 6%,48% 1%,62% 5%,75% 0,88% 6%,97% 3%,100% 18%,98% 40%,100% 62%,97% 84%,99% 97%,86% 93%,72% 99%,58% 94%,44% 100%,30% 95%,17% 99%,6% 94%,0 100%,2% 78%,0 56%,3% 34%)}
.cm-pinceau b{display:block;font-weight:500;color:#F7C9A8}
.cm-pattes{position:absolute;left:24cqw;top:41.2cqw;width:22cqw;height:4.6cqw;opacity:.9}
.cm-photo{position:absolute;right:4.4cqw;top:5cqw;width:35.5cqw;height:84cqw;max-height:calc(100% - 9cqw);
  transform:rotate(2.2deg);background:var(--b);padding:.55cqw;filter:drop-shadow(0 .6cqw 1cqw rgba(92,58,33,.25))}
.cm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cm-photo,.cm-photo img{clip-path:var(--dechire)}
.cm-tampon-patte{position:absolute;right:3.6cqw;bottom:3.4cqw;width:12.5cqw;transform:rotate(-14deg);opacity:.93;z-index:3}
.cm-binome{position:absolute;left:4.4cqw;right:46cqw;bottom:4.4cqw;display:flex;align-items:flex-end;gap:1.6cqw}
.cm-binome svg{width:8.4cqw;flex:0 0 auto}
.cm-binome div{flex:1;min-width:0}
.cm-binome small{display:block;font-size:2.4cqw;color:var(--bd);letter-spacing:.02em}
.cm-binome strong{display:block;font-size:3.5cqw;font-weight:600;color:var(--b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:.3cqw dotted var(--bd);padding-bottom:.3cqw}
.cm-statut{position:absolute;left:30.5cqw;top:5.2cqw;padding:.6cqw 1.8cqw;border-radius:99px;font-size:2.15cqw;font-weight:600;
  letter-spacing:.03em;background:#fff;color:var(--b);box-shadow:0 0 0 .25cqw rgba(92,58,33,.15);white-space:nowrap}
.cm-statut.ok{background:#E7F0E3;color:#2F5E36}
.cm-statut.attente{background:#FBE8D9;color:var(--of)}
.cm-statut.fin{background:#EDE1CF;color:var(--bd)}

/* ---------- VERSO ---------- */
.cm-wa{position:absolute;left:4.6cqw;top:4.6cqw;width:19.5cqw;height:19.5cqw;border-radius:2.4cqw;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;text-decoration:none;color:var(--b);
  box-shadow:0 0 0 .3cqw rgba(92,58,33,.14);text-align:center;font-size:1.9cqw;font-weight:600;line-height:1.15;padding:1.2cqw}
.cm-wa svg{width:8cqw;height:8cqw}
.cm-wa:hover,.cm-wa:focus-visible{box-shadow:0 0 0 .5cqw var(--o);outline:none}
.cm-wa[aria-disabled="true"]{opacity:.6;pointer-events:none}
.cm-fleche{position:absolute;left:24.5cqw;top:9cqw;width:7cqw}
.cm-reserve{position:absolute;left:4.4cqw;top:26.3cqw;margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:600;
  font-size:3.5cqw;color:var(--o);text-decoration:underline;text-decoration-thickness:.2cqw;text-underline-offset:.6cqw;white-space:nowrap}
.cm-reserve a{color:inherit}
.cm-ronds{position:absolute;left:34cqw;right:3.4cqw;top:3.6cqw;height:30.5cqw;display:flex;flex-wrap:wrap;justify-content:center;align-content:space-between;gap:1.4cqw 3cqw}
.cm-rond{position:relative;width:14.4cqw;height:14.4cqw;border:0;padding:0;background:none;cursor:pointer;border-radius:50%;color:inherit;font:inherit}
.cm-rond:focus-visible{outline:.45cqw solid var(--o);outline-offset:.3cqw}
.cm-rond > svg.anneau{position:absolute;inset:0;width:100%;height:100%}
.cm-rond .num{position:absolute;inset:0;display:grid;place-items:center;font-size:3cqw;font-weight:500;color:rgba(110,84,66,.38)}
.cm-rond .marque{position:absolute;inset:16%;display:grid;place-items:center;align-content:center;border-radius:50%;text-align:center;line-height:1.05}
.cm-rond .marque svg{width:58%;height:auto}
.cm-rond .marque span{font-size:2.05cqw;font-weight:600;margin-top:.3cqw;white-space:nowrap}
.cm-rond.fait .marque{color:var(--o);animation:cm-tampon .5s cubic-bezier(.2,1.6,.4,1) both}
.cm-rond.fait .marque svg{transform:rotate(var(--rot,-12deg))}
.cm-rond.decompte .marque{color:var(--bd)}
.cm-rond.decompte .marque svg{opacity:.55;transform:rotate(var(--rot,-12deg))}
.cm-rond.reserve .marque{color:var(--of)}
.cm-rond.reserve .marque svg{opacity:.85}
.cm-rond.fait .num,.cm-rond.decompte .num,.cm-rond.reserve .num{display:none}
@keyframes cm-tampon{0%{transform:scale(1.8);opacity:0}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.cm-rond.fait .marque{animation:none}}
.cm-infos{position:absolute;left:4.6cqw;right:31cqw;bottom:3.8cqw;margin:0;padding:0;list-style:none;font-size:2.6cqw;line-height:1.45;color:var(--bd)}
.cm-infos li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-infos b{font-weight:500;color:var(--o)}
.cm-prix{position:absolute;right:4.4cqw;bottom:3.8cqw;text-align:right;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;color:var(--o);line-height:.9}
.cm-prix strong{display:block;font-size:9.5cqw;font-weight:600;color:var(--o)}
.cm-prix small{display:block;font-family:"Jost",Verdana,sans-serif;font-style:normal;font-size:1.85cqw;color:var(--bd);margin-top:.8cqw;line-height:1.25;max-width:25cqw;margin-left:auto}

/* ---------- Bandeau sous la carte ---------- */
.cm-outils{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .7rem;margin-top:.9rem}
.cm-outils button,.cm-outils a{font:600 .9rem/1 "Jost",Verdana,sans-serif;border-radius:999px;padding:.62rem 1.05rem;cursor:pointer;text-decoration:none;
  border:2px solid #DE6523;background:#fff;color:#B94F15;display:inline-flex;align-items:center;gap:.4rem}
.cm-outils .plein{background:#DE6523;color:#fff}
.cm-outils button:hover,.cm-outils a:hover{background:#B94F15;border-color:#B94F15;color:#fff}
.cm-jauge{flex:1 1 100%;margin-top:.35rem;font-size:.88rem;color:#6E5442}
.cm-jauge .barre{height:7px;border-radius:99px;background:#EDE1CF;overflow:hidden;margin-top:.35rem}
.cm-jauge .barre i{display:block;height:100%;background:linear-gradient(90deg,#DE6523,#B94F15);border-radius:inherit}
.cm-detail{margin-top:.6rem;padding:.75rem 1rem;border-radius:10px;background:#fff;border:1px solid #e6d8c8;font-size:.92rem;color:#5C3A21;display:none}
.cm-detail.on{display:block}
.cm-legende{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.5rem;font-size:.8rem;color:#6E5442}
.cm-legende span::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.35em;vertical-align:-.05em}
.cm-legende .l-fait::before{background:#DE6523}
.cm-legende .l-res::before{border:2px dashed #B94F15;width:.5em;height:.5em}
.cm-legende .l-dec::before{background:#B9A390}
.cm-legende .l-lib::before{border:2px solid #D8C6B2;width:.5em;height:.5em}
.cm-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cm-qr{position:absolute;right:5cqw;top:5cqw;width:33cqw;height:39cqw;border:0;border-radius:3cqw;background:#fff;cursor:zoom-in;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4cqw;padding:2.6cqw;box-shadow:0 0 0 .35cqw rgba(92,58,33,.15),0 1cqw 2.4cqw rgba(92,58,33,.15);transform:rotate(1.5deg)}
.cm-qr svg{width:26cqw;height:26cqw;display:block}
.cm-qr span{font:600 2.3cqw/1 "Jost",Verdana,sans-serif;color:#B94F15;letter-spacing:.02em}
.cm-qr:focus-visible{outline:.5cqw solid #DE6523;outline-offset:.4cqw}
.cm-membre .cm-tampon-patte{right:auto;left:auto;right:33cqw;bottom:16cqw;width:9cqw;opacity:.85}
.cm-membre .cm-binome{right:4.4cqw}
.cm-zoom{position:fixed;inset:0;z-index:1000;background:rgba(47,30,17,.72);display:grid;place-items:center;padding:1rem}
.cm-zoom > div{background:#fff;border-radius:18px;padding:1.4rem;text-align:center;max-width:420px;width:100%;font-family:"Jost",Verdana,sans-serif;color:#5C3A21}
.cm-zoom-qr svg{width:100%;height:auto;display:block}
.cm-zoom button{margin-top:.6rem;font:600 1rem/1 "Jost",sans-serif;border:0;border-radius:999px;padding:.7rem 1.4rem;background:#DE6523;color:#fff;cursor:pointer}

@media print{
  .cm-outils,.cm-detail,.cm-legende{display:none!important}
  .cm-scene{perspective:none;aspect-ratio:auto;height:auto}
  .cm-flip{transform:none!important;height:auto}
  .cm-face{position:relative;transform:none!important;aspect-ratio:1050/600;break-inside:avoid;margin-bottom:6mm;box-shadow:none;border:1px solid #d8c6b2}
  .cm-verso{opacity:1!important;visibility:visible!important}
  .cm-recto{visibility:visible!important}
  .cm-face{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}