/* Cartopia : carte (recto / dos). A charger APRES cartopia.css. Polices : Libre Baskerville + Abril Fatface seulement. */

/* grille de la collection */
.colgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
@media(max-width:700px){.colgrid{grid-template-columns:repeat(2,1fr);gap:12px}}

/* ---------- recto ---------- */
.cx-card{--c:#EBD9A8;--t:#2B2118;position:relative;display:flex;flex-direction:column;background:var(--c);color:var(--t);
  border:3px solid #2B2118;border-radius:14px;overflow:hidden;box-shadow:0 5px 0 rgba(0,0,0,.5),0 10px 18px rgba(0,0,0,.35);
  font-family:'Libre Baskerville',serif;transition:transform .12s}
.cx-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 38%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.cx-card.click{cursor:pointer}
.cx-card.click:hover{transform:translateY(-4px)}

.cx-photo{position:relative;aspect-ratio:1/.92;background:repeating-linear-gradient(135deg,#E2CF9F 0 7px,#D6C28B 7px 14px);border-bottom:3px solid #2B2118;overflow:hidden;flex-shrink:0}
.cx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.cx-photo.none{display:flex;align-items:center;justify-content:center}
.cx-nophoto{font-size:12px;color:#2B2118;opacity:.75;text-align:center;padding:0 10px}

.cx-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:6px;z-index:2}
.cx-sp{flex:1}
.cx-rar{background:var(--c);color:var(--t);font-weight:700;font-size:11px;letter-spacing:.08em;padding:5px 10px 5px 9px;border-right:3px solid #2B2118;border-bottom:3px solid #2B2118;border-radius:0 0 10px 0;white-space:nowrap}
.cx-ev{margin-top:5px;min-width:26px;height:26px;padding:0 4px;box-sizing:border-box;border-radius:13px;background:var(--c);color:var(--t);border:2px solid #2B2118;
  font-family:'Abril Fatface',serif;font-size:15px;line-height:22px;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.cx-ev.zero{opacity:.55}
.cx-fav{margin:6px 6px 0 0;width:30px;height:30px;border-radius:50%;border:2px solid #FFF6DC;background:rgba(43,33,24,.72);color:#FFF6DC;font-size:16px;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cx-fav:hover{background:#2B2118}
.cx-fav.on{background:#FFC21F;color:#2B2118;border-color:#2B2118}

.cx-pfoot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:5px;padding:6px 8px;z-index:2;pointer-events:none}
.cx-dot{width:11px;height:11px;border-radius:50%;border:2px solid #FFF6DC;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.cx-lock{font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.7)}

.cx-body{height:112px;box-sizing:border-box;padding:9px 11px 10px;display:flex;flex-direction:column;gap:3px;overflow:hidden;text-align:center}
.cx-name{font-weight:700;font-size:14px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.cx-where{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-desc{font-style:italic;font-size:11px;line-height:1.3;opacity:.92;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* carte shiny : reflet qui passe */
.cx-card.shiny::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);background-size:250% 100%;animation:cxshine 3.4s ease-in-out infinite}
@keyframes cxshine{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}

/* grande carte (fenetre de detail) */
.cx-card.big{border-width:4px;border-radius:18px}
.cx-card.big .cx-rar{font-size:14px;padding:7px 14px 7px 12px}
.cx-card.big .cx-ev{height:34px;min-width:34px;border-radius:17px;font-size:20px;line-height:30px;margin-top:7px}
.cx-card.big .cx-fav{width:38px;height:38px;font-size:20px;margin:8px 8px 0 0}
.cx-card.big .cx-body{height:150px;padding:12px 16px 14px;gap:5px}
.cx-card.big .cx-name{font-size:21px;min-height:50px}
.cx-card.big .cx-where{font-size:12px}
.cx-card.big .cx-desc{font-size:13px;-webkit-line-clamp:3}
.cx-card.big .cx-nophoto{font-size:15px}
.cx-card.big .cx-dot{width:14px;height:14px}

/* ---------- dos de carte : enveloppe "par avion" ---------- */
.cx-back{background:#2B2118;aspect-ratio:5/7;justify-content:stretch}
.cx-back::after{display:none}
.cx-air{flex:1;display:flex;padding:9px;background:repeating-linear-gradient(-45deg,#D23A32 0 12px,#FFF6DC 12px 24px,#2F5FA3 24px 36px,#FFF6DC 36px 48px)}
.cx-paper{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#FFF6DC 0,#F2E2B5 70%,#E8D49C 100%);color:#2B2118;border:2px solid #2B2118;text-align:center}
.cx-rose{width:52%;max-width:170px;color:#2F5FA3;opacity:.9}
.cx-rose svg{width:100%;height:auto;display:block}
.cx-logo{font-family:'Abril Fatface',serif;font-size:26px;letter-spacing:.06em;color:#B32A24;line-height:1}
.cx-slogan{font-size:9px;font-weight:700;letter-spacing:.16em;color:#2F5FA3}
.cx-card.big .cx-logo{font-size:36px}
.cx-card.big .cx-slogan{font-size:11px}

/* verso (dans le detail) : timbre + credits + liens */
.cx-back .cx-paper:has(.cx-verso){justify-content:flex-start;padding-top:14px}
.cx-back .cx-paper:has(.cx-verso) .cx-rose{width:34%}
.cx-stamp{position:absolute;top:10px;right:10px;width:62px;padding:7px 4px;background:var(--c);color:var(--t);text-align:center;display:flex;flex-direction:column;gap:2px;
  border:2px dashed #2B2118;outline:3px solid #FFF6DC;box-shadow:0 2px 0 rgba(0,0,0,.35);transform:rotate(3deg)}
.cx-stamp b{font-size:8px;letter-spacing:.06em;line-height:1.1}
.cx-stamp span{font-family:'Abril Fatface',serif;font-size:15px;line-height:1}
.cx-card.big .cx-stamp{width:84px;top:14px;right:14px}
.cx-card.big .cx-stamp b{font-size:10px}
.cx-card.big .cx-stamp span{font-size:20px}
.cx-verso{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:6px;text-align:left;border-top:2px solid #2B2118;padding-top:10px}
.cx-vname{font-weight:700;font-size:13px;line-height:1.25}
.cx-vline{font-size:11px;line-height:1.35;opacity:.85;border-bottom:1px solid rgba(43,33,24,.35);padding-bottom:5px}
.cx-links{display:flex;flex-direction:column;gap:4px}
.cx-links a{font-size:12px;font-weight:700;color:#2F5FA3;text-decoration:underline}
.cx-card.big .cx-vname{font-size:16px}
.cx-card.big .cx-vline{font-size:12px}
.cx-card.big .cx-links a{font-size:14px}

/* ---------- retournement ---------- */
.cx-flip{perspective:1100px;width:min(340px,86vw);margin:0 auto;cursor:pointer}
.cx-flipin{position:relative;transition:transform .6s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.cx-flip.flipped .cx-flipin{transform:rotateY(180deg)}
.cx-flip .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cx-flip .cx-back.rev{position:absolute;inset:0;transform:rotateY(180deg);aspect-ratio:auto}
.cx-flip .cx-card.big{box-shadow:0 6px 0 rgba(0,0,0,.45),0 16px 28px rgba(0,0,0,.4)}
.cx-hint{text-align:center;font-size:12px;opacity:.7}

/* ---------- carte evenement : cadre blanc casse + bandeau ---------- */
.cx-card.ev{border-color:#FFF6DC;box-shadow:0 0 0 2px #2B2118,0 5px 0 rgba(0,0,0,.5),0 10px 18px rgba(0,0,0,.35)}
.cx-card.ev .cx-photo{aspect-ratio:1/.76;border-bottom:3px solid #2B2118}
.cx-band{display:flex;justify-content:space-between;gap:8px;align-items:center;background:#FFF6DC;color:#2B2118;border-bottom:3px solid #2B2118;padding:5px 10px;font-size:9px;font-weight:700;letter-spacing:.12em;white-space:nowrap;overflow:hidden}
.cx-band span:last-child{overflow:hidden;text-overflow:ellipsis;opacity:.75}
.cx-card.big.ev .cx-band{font-size:11px;padding:7px 14px}
.cx-ev.full{background:#FFC21F;color:#2B2118;padding:0 7px}

/* ---------- dos : billets des evenements / carte du lieu ---------- */
.cx-back .cx-paper:has(.cx-tix){justify-content:flex-start;gap:6px}
.cx-back .cx-paper:has(.cx-tix) .cx-rose,.cx-back .cx-paper:has(.cx-tix) .cx-logo,.cx-back .cx-paper:has(.cx-tix) .cx-slogan{display:none}
.cx-tix{width:100%;display:flex;flex-direction:column;gap:6px;max-height:48%;overflow-y:auto;padding:2px 2px 4px}
.cx-tixh{font-size:10px;font-weight:700;letter-spacing:.14em;text-align:center;margin-bottom:2px}
.cx-tk{display:flex;align-items:stretch;background:var(--c,#EBD9A8);color:var(--t,#2B2118);border:2px solid #2B2118;border-radius:8px;overflow:hidden;text-align:left;flex-shrink:0}
.cx-tk.click{cursor:pointer}
.cx-tk.click:hover{filter:brightness(1.06)}
.cx-tkimg{width:44px;flex-shrink:0;background:#D6C28B center/cover;border-right:2px dashed #2B2118;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:'Abril Fatface',serif;font-size:18px}
.cx-tkt{padding:4px 8px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.cx-tkt small{font-size:8px;letter-spacing:.1em;opacity:.85}
.cx-tkt b{font-size:12px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cx-tk.lock{background:#8D8778;color:#EFE7D2;border-style:dashed}
.cx-tk.lock .cx-tkimg{background:repeating-linear-gradient(135deg,#7C7769 0 6px,#8D8778 6px 12px)}
.cx-card.big .cx-tix{max-height:52%}
.cx-card.big .cx-tkimg{width:56px}
.cx-card.big .cx-tkt b{font-size:14px}
.cx-card.big .cx-tkt small{font-size:9px}
.cx-card.big .cx-tixh{font-size:12px}
.cx-minihost{width:56%;margin:0 auto}
.cx-minihost .cx-card{pointer-events:auto}
.cx-back .cx-paper:has(.cx-minihost){justify-content:flex-start;gap:6px}
.cx-back .cx-paper:has(.cx-minihost) .cx-rose,.cx-back .cx-paper:has(.cx-minihost) .cx-logo,.cx-back .cx-paper:has(.cx-minihost) .cx-slogan{display:none}
.cx-back .cx-paper:has(.cx-minihost) .cx-tix{max-height:none;overflow:visible}
.cx-back .cx-paper:has(.cx-tix),.cx-back .cx-paper:has(.cx-minihost){padding-top:52px}
.cx-card.big.cx-back .cx-paper:has(.cx-tix),.cx-card.big.cx-back .cx-paper:has(.cx-minihost){padding-top:72px}
.cx-minihost{width:44%}
.cx-card.big .cx-minihost{width:46%}
.cx-tixh{text-align:left}
.cx-ev{white-space:nowrap}
.cx-minihost{width:50%}
.cx-card.big .cx-minihost{width:52%}
.cx-minihost{width:46%}
.cx-card.big .cx-minihost{width:46%}

/* cadre dore : abonnes T3, sur leurs propres cartes en collection */
.gold .cx-card{box-shadow:0 0 0 3px #E6C35C,0 0 0 5px #B8860B,0 4px 10px rgba(0,0,0,.35)}