:root{
  --ink:#12181A; --panel:#1B2321; --panel-alt:#212B28; --panel-alt2:#283330;
  --line:#33413C; --line-soft:#2A3531;
  --ember:#E3B341; --ember-dark:#8C6A1D; --ember-ink:#3A2C0C;
  --text-hi:#F2EFE6; --text-lo:#9CA39E; --text-faint:#5E6864;
  --safe-line:#E0483C; --danger:#D9584C;
  --card-scale:1.7;
}
@media (max-width:1100px){ :root{ --card-scale:1.3; } }
@media (max-width:480px){ :root{ --card-scale:0.9; } }
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--ink);color:var(--text-hi);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}

/* ---------- Top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--panel);}
.brand{display:flex;align-items:center;gap:12px;}
.brand svg{width:30px;height:30px;flex-shrink:0;}
.brand-text h1{font-family:'Inter',sans-serif;font-weight:600;margin:0;font-size:19px;letter-spacing:0.01em;color:var(--text-hi);}
.brand-text p{margin:2px 0 0;font-size:12px;color:var(--text-lo);}
.version-tag{color:var(--text-faint);font-family:'IBM Plex Mono',monospace;font-size:11px;margin-left:4px;}
.top-actions{display:flex;align-items:center;gap:10px;}
.tab{padding:8px 16px;border-radius:8px;font-size:13.5px;border:1px solid transparent;cursor:pointer;color:var(--text-lo);text-decoration:none;}
.tab:hover{background:var(--panel-alt2);color:var(--text-hi);}

.btn-export{background:var(--ember);color:var(--ember-ink);border:none;font-weight:600;font-size:13.5px;padding:9px 18px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;text-decoration:none;}
.btn-export:hover{background:#EEBE55;}
.btn-export:active{transform:scale(0.98);}
.btn-ghost{background:transparent;color:var(--text-hi);border:1px solid var(--line);font-weight:500;font-size:13.5px;padding:8px 16px;border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
.btn-ghost:hover{background:var(--panel-alt2);}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger);font-weight:500;font-size:13px;padding:7px 14px;border-radius:7px;cursor:pointer;font-family:'Inter',sans-serif;}
.btn-danger:hover{background:rgba(217,88,76,0.12);}

/* ---------- Generic pages (admin, cards index, login) ---------- */
.page-pad{padding:28px 32px 60px;max-width:1100px;margin:0 auto;}
.page-pad.full-width{max-width:none;margin:0;}
.editor-page{width:100%;}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.page-title{font-size:20px;font-weight:600;margin:0;}
.hint{font-size:11.5px;color:var(--text-faint);margin-top:6px;line-height:1.5;}
.flash-success{background:rgba(78,139,107,0.15);border:1px solid #4E8B6B;color:#9BE0BC;padding:10px 14px;border-radius:8px;font-size:13.5px;margin-bottom:16px;}
.flash-error{background:rgba(217,88,76,0.15);border:1px solid var(--danger);color:#F3B3AC;padding:10px 14px;border-radius:8px;font-size:13.5px;margin-bottom:16px;}

/* Messages flash rendus par le serveur : caches, toast.js les convertit au chargement.
   Evite tout probleme de marge/positionnement de bandeau fixe (une seule fois pour toutes
   les pages), et donne un rendu "toast" coherent partout. */
[data-flash]{display:none;}

.toast-container{position:fixed;top:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:360px;}
.toast{pointer-events:auto;padding:12px 16px;border-radius:10px;font-size:13.5px;line-height:1.4;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);animation:toast-in .2s ease-out;}
.toast.success{background:#1B2321;border:1px solid #4E8B6B;color:#9BE0BC;}
.toast.error{background:#1B2321;border:1px solid var(--danger);color:#F3B3AC;}
.toast.hide{animation:toast-out .18s ease-in forwards;}
@keyframes toast-in{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:translateX(0);}}
@keyframes toast-out{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(24px);}}

.search-box{position:relative;display:flex;align-items:center;max-width:380px;margin-bottom:18px;}
.search-box .search-icon{position:absolute;left:13px;color:var(--text-faint);pointer-events:none;}
.search-box input[type="search"]{width:100%;background:var(--panel-alt);border:1px solid var(--line);color:var(--text-hi);
  border-radius:20px;padding:9px 34px 9px 34px;font-size:13.5px;font-family:'Inter',sans-serif;
  transition:border-color .15s ease,box-shadow .15s ease;appearance:none;-webkit-appearance:none;}
.search-box input[type="search"]::-webkit-search-cancel-button{cursor:pointer;}
.search-box input[type="search"]:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(227,179,65,0.15);}
.search-box input[type="search"]::placeholder{color:var(--text-faint);}
.search-spinner{position:absolute;right:12px;width:14px;height:14px;border:2px solid rgba(227,179,65,0.3);
  border-top-color:var(--ember);border-radius:50%;opacity:0;transition:opacity .15s ease;animation:spin .7s linear infinite;}
.search-spinner.active{opacity:1;}

.cards-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
.filter-links{display:flex;align-items:center;gap:14px;font-size:12.5px;}

.bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel-alt);border:1px solid var(--line);
  border-radius:8px;padding:10px 14px;margin-bottom:18px;font-size:13px;color:var(--text-lo);}
.bulk-bar select{width:auto;}

.card-select-overlay{position:absolute;top:8px;left:8px;z-index:5;background:rgba(18,24,26,0.7);border-radius:5px;padding:3px;line-height:0;}
.card-cell{position:relative;}
.view-toggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.view-toggle a{padding:7px 14px;font-size:13px;color:var(--text-lo);text-decoration:none;}
.view-toggle a.active{background:var(--panel-alt2);color:var(--text-hi);}
.sort-links{font-size:12.5px;color:var(--text-faint);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sort-link{color:var(--text-lo);text-decoration:none;}
.sort-link:hover{color:var(--text-hi);}
.sort-link.active{color:var(--ember);font-weight:600;}
.list-thumb{width:36px;height:50px;object-fit:cover;border-radius:4px;display:block;}

.data-table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.data-table th,.data-table td{padding:12px 16px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line-soft);}
.data-table th{color:var(--text-lo);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:0.04em;}
.data-table tr:last-child td{border-bottom:none;}
.table-actions{text-align:right;}
.table-actions a{margin-left:8px;}
.tier-badge{display:inline-block;background:var(--panel-alt2);border:1px solid var(--line);border-radius:5px;
  padding:2px 8px;font-size:11px;margin-right:6px;color:var(--text-lo);}

.stack-form{max-width:420px;display:flex;flex-direction:column;gap:16px;}
.stack-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-lo);}
.form-actions{display:flex;gap:10px;margin-top:4px;}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;}
.card-thumb{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--text-hi);}
.card-thumb img{width:100%;aspect-ratio:744/1038;object-fit:cover;display:block;}
.card-thumb-meta{padding:10px 12px;}
.card-thumb-meta strong{display:block;font-size:13.5px;margin-bottom:2px;}
.card-thumb-meta span{font-size:11.5px;color:var(--text-lo);}

/* ---------- Auth page ---------- */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 0%, #1E2624 0%, var(--ink) 70%);}
.auth-card{width:320px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px 28px;display:flex;flex-direction:column;gap:14px;}
.auth-brand{font-family:'Titan One',cursive;font-weight:400;font-size:24px;margin:0;color:var(--ember);text-align:center;}
.auth-sub{margin:0 0 6px;font-size:12.5px;color:var(--text-lo);text-align:center;}
.auth-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-lo);}

/* ---------- Form fields (shared) ---------- */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],select,textarea{
  width:100%;background:var(--panel-alt);border:1px solid var(--line);color:var(--text-hi);
  border-radius:7px;padding:8px 10px;font-size:13.5px;font-family:'Inter',sans-serif;
}
/* L'input fichier natif reste dans le DOM (accessibilite, soumission du formulaire) mais
   invisible : toute l'interaction passe par la zone de glisser-deposer (#dropZone), dont
   le texte "Aucun fichier selectionne" du navigateur n'est de toute facon pas stylable
   proprement (c'est ce qui debordait). */
input[type="file"]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
textarea{resize:none;line-height:1.5;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember-dark);}

/* ---------- Editor layout ---------- */
.editor-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--panel);}
.editor-topbar-left{display:flex;align-items:center;gap:14px;}
.editor-topbar-title{font-weight:600;font-size:15px;}
.editor-topbar-right{display:flex;gap:10px;}

.layout{display:grid;grid-template-columns:300px 1fr 300px;gap:0;align-items:start;}
.panel{padding:22px 22px 40px;border-right:1px solid var(--line);}
.panel.right{border-right:none;border-left:1px solid var(--line);}
.section{margin-bottom:28px;}
.section-title{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-lo);margin:0 0 12px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--text-lo);margin-bottom:6px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;}

.switch-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line-soft);}
.switch-row:last-child{border-bottom:none;}
.switch-row span{font-size:13px;color:var(--text-hi);}
.swatch{display:inline-block;width:14px;height:2.5px;margin-right:8px;vertical-align:middle;}
.swatch.dash{border-top:2px dashed var(--safe-line);width:16px;height:0;}
.swatch.solid{background:var(--text-hi);opacity:0.7;}
.swatch.blue{background:#4F8FD1;}
.switch{position:relative;width:34px;height:19px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider-toggle{position:absolute;cursor:pointer;inset:0;background:var(--panel-alt2);border-radius:20px;transition:.15s;border:1px solid var(--line);}
.slider-toggle:before{content:"";position:absolute;height:13px;width:13px;left:2px;top:2px;background:var(--text-lo);border-radius:50%;transition:.15s;}
.switch input:checked + .slider-toggle{background:var(--ember-dark);}
.switch input:checked + .slider-toggle:before{transform:translateX(15px);background:var(--ember);}

.spec-box{background:var(--panel-alt);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-top:12px;}
.spec-box .mono{font-size:11.5px;color:var(--text-lo);line-height:1.9;}
.spec-box .mono b{color:var(--text-hi);font-weight:500;}

.checkbox-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-hi);}
.checkbox-row input{accent-color:var(--ember);width:15px;height:15px;}
.checkbox-row.disabled{color:var(--text-faint);}

.talent-entry{border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:10px;background:var(--panel-alt);}
.talent-entry-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.talent-entry-label{font-size:11px;color:var(--text-lo);text-transform:uppercase;letter-spacing:0.05em;}
.talent-remove-btn{background:transparent;border:none;color:var(--text-faint);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;}
.talent-remove-btn:hover{color:var(--danger);}

.editions-layout{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;}
.editions-form-col{max-width:480px;flex:1 1 420px;}
.editions-preview-col{width:320px;flex:0 0 320px;position:sticky;top:20px;}
.box-preview-tabs{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:8px;}
.box-tab{flex:1;background:transparent;border:none;padding:9px 6px;font-size:12.5px;color:var(--text-lo);cursor:pointer;border-right:1px solid var(--line);}
.box-tab:last-child{border-right:none;}
.box-tab.active{background:var(--panel-alt2);color:var(--text-hi);font-weight:600;}
.box-preview-subtabs{display:flex;gap:6px;margin-bottom:12px;}
.box-subtab{flex:1;background:transparent;border:1px solid var(--line);border-radius:6px;padding:5px 6px;
  font-size:11.5px;color:var(--text-faint);cursor:pointer;}
.box-subtab.active{background:rgba(227,179,65,0.12);border-color:var(--ember);color:var(--ember);font-weight:600;}
.box-preview-stage{position:relative;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--panel-alt);border:1px solid var(--line);}
.box-preview-stage img{width:100%;height:100%;object-fit:cover;display:block;}
.box-preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;
  text-align:center;font-family:'Nunito',sans-serif;font-size:13px;color:var(--text-faint);}
.box-preview-overlay{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(to top, rgba(10,12,10,0.85), rgba(10,12,10,0));}
.box-preview-title{font-family:'Titan One',cursive;font-size:19px;color:#F8E9BC;
  text-shadow:0 2px 6px rgba(0,0,0,0.6);}
.box-preview-tagline{font-family:'Nunito',sans-serif;font-size:12px;color:#F5F1E4;margin-top:2px;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);}

.back-preview-stage{position:relative;width:160px;aspect-ratio:322/438;border-radius:9px;overflow:hidden;
  background:var(--panel-alt);border:1px solid var(--line);}
.back-preview-stage img{width:100%;height:100%;object-fit:cover;display:block;}
.back-preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;
  text-align:center;font-family:'Nunito',sans-serif;font-size:11.5px;color:var(--text-faint);}

.generate-layout{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;}
.generate-preview{width:280px;}
.generate-preview-box{position:relative;width:100%;aspect-ratio:744/1038;border-radius:10px;border:1px dashed var(--line);overflow:hidden;background:var(--panel-alt);}
.generate-preview-box img{width:100%;height:100%;object-fit:cover;display:block;}
.generate-preview-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;color:var(--text-faint);font-size:13px;line-height:1.5;}
.generate-preview-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(18,24,26,0.8);color:var(--text-hi);font-size:12.5px;line-height:1.5;text-align:center;padding:20px;}
.spinner{width:30px;height:30px;border:3px solid rgba(227,179,65,0.25);border-top-color:var(--ember);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.generate-actions-wrap{margin-top:14px;}
.generate-actions-wrap label{display:block;font-size:12.5px;color:var(--text-lo);margin-bottom:6px;}
.generate-actions{display:flex;gap:10px;margin-top:12px;}
.generate-actions .btn-export,.generate-actions .btn-ghost{flex:1;justify-content:center;text-align:center;}

.global-drop-overlay{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  background:rgba(18,24,26,0.88);border:4px dashed var(--ember);pointer-events:none;}
.global-drop-overlay.active{display:flex;}
.global-drop-message{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;color:var(--ember);}

.thumb-card{border:1px dashed var(--line);border-radius:8px;padding:10px;display:flex;align-items:center;gap:10px;min-height:40px;overflow:hidden;transition:border-color .15s,background .15s;}
.thumb-card.dragover{border-color:var(--ember);background:rgba(227,179,65,0.08);}
.thumb-card img{width:38px;height:51px;border-radius:4px;object-fit:cover;flex-shrink:0;}
.thumb-card .meta{font-size:12px;color:var(--text-lo);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- Center canvas ---------- */
.stage{display:flex;flex-direction:column;align-items:center;padding:44px 20px 30px;
  background:radial-gradient(ellipse at 50% 0%, #1E2624 0%, var(--ink) 70%);
  min-height:640px;
}
.card-shell{position:relative;width:calc(322px * var(--card-scale, 1.7));height:calc(438px * var(--card-scale, 1.7));filter:drop-shadow(0 18px 40px rgba(0,0,0,0.45));}
.card-zoom{transform:scale(var(--card-scale, 1.7));transform-origin:top left;}

.card{position:relative;width:322px;height:438px;border-radius:9px;overflow:hidden;background:#0d0f0d;}
.card-back-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:20px;font-family:'Nunito',sans-serif;font-size:13px;color:var(--text-faint);}
.card-back-empty a{color:var(--ember);}
.art-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.28) 100%);}
.top-fade{position:absolute;left:0;right:0;top:0;height:24%;pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,10,8,0.4), rgba(8,10,8,0));}
.bottom-fade{position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(to top, rgba(8,10,8,0.62), rgba(8,10,8,0));}

/* Anneau de bordure inséré à la ligne de coupe (mêmes bornes que .guide.cut), donc
   toujours contenu DANS la carte (overflow:hidden sur .card) : ni débordement, ni
   changement de taille au toggle — juste display:none/block. L'épaisseur du "border"
   (22px, jusqu'au bord reel du fond perdu) laisse un vrai espace avant que le texte ne
   commence (safe area), tout en couvrant toute la marge de tolerance de decoupe : meme si
   la coupe physique n'est pas pixel-parfaite, c'est la couleur de la bordure qui se
   revele, jamais un liseré non couvert. */
.card-frame-ring{position:absolute;inset:0;
  border-radius:9px;border:22px solid transparent;pointer-events:none;display:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='21.4' cy='11.1' r='0.5' fill='%23fff' fill-opacity='0.39'/%3E%3Ccircle cx='34.2' cy='23.9' r='0.5' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='14.9' cy='7.2' r='0.9' fill='%23fff' fill-opacity='0.39'/%3E%3Ccircle cx='7.4' cy='27.5' r='1.1' fill='%23fff' fill-opacity='0.42'/%3E%3Ccircle cx='15.4' cy='39.6' r='0.5' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='25.8' cy='60.6' r='0.5' fill='%23fff' fill-opacity='0.68'/%3E%3Ccircle cx='10.0' cy='27.1' r='1.1' fill='%23fff' fill-opacity='0.42'/%3E%3Ccircle cx='20.5' cy='51.0' r='0.6' fill='%23fff' fill-opacity='0.41'/%3E%3Ccircle cx='36.3' cy='13.3' r='0.5' fill='%23fff' fill-opacity='0.68'/%3E%3Ccircle cx='5.8' cy='5.6' r='0.6' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='33.9' cy='48.6' r='0.9' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='29.2' cy='20.0' r='0.6' fill='%23fff' fill-opacity='0.77'/%3E%3Ccircle cx='16.6' cy='36.5' r='1.1' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='22.6' cy='28.9' r='1.1' fill='%23fff' fill-opacity='0.94'/%3E%3Ccircle cx='9.1' cy='27.1' r='0.7' fill='%23fff' fill-opacity='0.44'/%3E%3Ccircle cx='31.3' cy='4.4' r='0.5' fill='%23fff' fill-opacity='0.81'/%3E%3Ccircle cx='36.4' cy='54.5' r='0.7' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='23.0' cy='31.8' r='0.9' fill='%23fff' fill-opacity='0.39'/%3E%3Ccircle cx='7.6' cy='18.2' r='0.5' fill='%23fff' fill-opacity='0.39'/%3E%3Ccircle cx='44.1' cy='40.8' r='0.9' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='25.1' cy='42.1' r='0.5' fill='%23fff' fill-opacity='0.91'/%3E%3Ccircle cx='23.3' cy='38.7' r='0.9' fill='%23fff' fill-opacity='0.39'/%3E%3Ccircle cx='48.1' cy='9.8' r='0.6' fill='%23fff' fill-opacity='0.59'/%3E%3Ccircle cx='57.0' cy='31.8' r='0.6' fill='%23fff' fill-opacity='0.62'/%3E%3Ccircle cx='35.0' cy='55.0' r='0.9' fill='%23fff' fill-opacity='0.87'/%3E%3Ccircle cx='18.7' cy='26.9' r='0.7' fill='%23fff' fill-opacity='0.76'/%3E%3C/svg%3E") repeat border-box,
    linear-gradient(120deg,#E3B341,#F2C1DA,#8B5CF6,#3E7CBF,#6FE0C4,#E3B341) border-box;
  background-size:40px 40px, 300% 300%;
  animation:shimmer 5s ease infinite;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.card-frame-ring.bling{display:block;}
@keyframes shimmer{0%{background-position:0 0, 0% 50%}50%{background-position:0 0, 100% 50%}100%{background-position:0 0, 0% 50%}}

.card-name{position:absolute;top:5.9%;left:8.1%;right:34%;margin:0;font-family:'Titan One',cursive;font-weight:400;
  font-size:24px;line-height:1.05;white-space:nowrap;overflow:hidden;
  color:#F8E9BC;
  text-shadow:-2px -2px 0 rgba(24,16,4,0.9),2px -2px 0 rgba(24,16,4,0.9),-2px 2px 0 rgba(24,16,4,0.9),2px 2px 0 rgba(24,16,4,0.9),0 3px 9px rgba(0,0,0,0.55);}
.card-topright{position:absolute;top:5.9%;right:8.1%;max-width:32%;text-align:right;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:#F8E9BC;letter-spacing:0.02em;
  text-shadow:-1.5px -1.5px 0 rgba(24,16,4,0.85),1.5px -1.5px 0 rgba(24,16,4,0.85),-1.5px 1.5px 0 rgba(24,16,4,0.85),1.5px 1.5px 0 rgba(24,16,4,0.85),0 2px 5px rgba(0,0,0,0.4);}

.bottom-zone{position:absolute;left:8.1%;right:8.1%;top:65%;bottom:5.9%;display:flex;flex-direction:column;overflow:hidden;}

.talents-list{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:7px;overflow:hidden;}
.talent-block{flex:0 0 auto;}
.talent-block .t-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.talent-block .t-name{font-family:'Nunito',sans-serif;font-weight:800;font-style:italic;font-size:15.5px;color:#fff;
  text-shadow:0 1.5px 4px rgba(0,0,0,0.6);}
.talent-block .t-atk{font-family:'Nunito',sans-serif;font-weight:800;font-size:12.5px;color:#FCEFD0;white-space:nowrap;
  text-shadow:0 1.5px 4px rgba(0,0,0,0.6);}
.talent-block .t-atk.bonus{color:#7EC8FF;}
.talent-block .t-atk.malus{color:#C79BFF;}
.talent-block .t-text{margin-top:2px;font-family:'Nunito',sans-serif;font-weight:600;font-size:12px;line-height:1.3;color:#F5F1E4;
  text-shadow:0 1.5px 4px rgba(0,0,0,0.6);}
/* Les tailles ci-dessus sont des tailles de DEPART : editor.js les reduit dynamiquement
   (via style inline sur chaque element) jusqu'a ce que le texte complet — sans aucune
   troncature — tienne dans l'espace disponible. Le texte n'est jamais coupe avec "…" ;
   overflow:hidden ci-dessus (et sur .bottom-zone) ne sert que de filet de securite en cas
   de texte extremement long malgre la taille minimale. */

.rarity-divider{flex:0 0 auto;height:1px;background:rgba(255,255,255,0.4);margin:6px 0;box-shadow:0 1px 3px rgba(0,0,0,0.4);}
.rarity-line{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.rarity-left{display:flex;align-items:baseline;gap:6px;}
.edition-name{font-family:'Nunito',sans-serif;font-weight:700;font-size:9px;color:#FCEFD0;letter-spacing:0.03em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);}
.rarity-letter{font-family:'Nunito',sans-serif;font-weight:700;font-size:9px;color:#FCEFD0;letter-spacing:0.05em;
  text-shadow:0 1.5px 4px rgba(0,0,0,0.55);}
.collector-number{font-family:'Nunito',sans-serif;font-weight:700;font-size:9px;color:#FCEFD0;letter-spacing:0.02em;white-space:nowrap;
  text-shadow:0 1.5px 4px rgba(0,0,0,0.55);}

.guide{position:absolute;pointer-events:none;}
.guide.cut{border:1.5px solid rgba(255,255,255,0.55);}
.guide.safe{border:1.5px dashed var(--safe-line);}
.guide-legend{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap;justify-content:center;}
.guide-legend .item{display:flex;align-items:center;font-size:11.5px;color:var(--text-lo);}

@media (max-width:1100px){
  .layout{grid-template-columns:1fr;}
  .panel{border-right:none;border-bottom:1px solid var(--line);}
  .panel.right{border-left:none;}
}