/* Onglet Cartes (#/cartes) : jeu de cartes à collectionner. Couleurs du thème d'ihm.html (--fond, --carte…). */
.cj { --c-commune: #9a9486; --c-peu_commune: #5aa878; --c-rare: #5a8fd0; --c-super_rare: #a97bd6;
      --c-ultra_rare: #e0b04a; --c-legendaire: #ff7a45; --c-bonus: #3fd0c9; }
.cj-barre { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 14px; }
.cj-onglets { display: flex; gap: 4px; flex-wrap: wrap; }
.cj-onglets a { padding: 5px 12px; border-radius: 6px; color: var(--sourd); border: 1px solid transparent; }
.cj-onglets a.actif { color: var(--texte); background: var(--carte2); border-color: var(--bord); }
.cj-moi { margin-left: auto; display: flex; gap: 10px; align-items: center; color: var(--sourd); font-size: 13px; }
.cj-moi b { color: var(--texte); }
.cj-eclats { color: var(--c-bonus); font-weight: 700; }
.cj-panneau { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.cj-panneau h3 { margin: 0 0 10px; font-size: 15px; }
.cj-note { color: var(--sourd); font-size: 12.5px; }
.cj-erreur { color: var(--rouge); }
.cj select, .cj input[type=password], .cj input[type=number], .cj input[type=search], .cj textarea, .cj input[type=text] {
  font: inherit; border-radius: 6px; border: 1px solid var(--bord); background: var(--carte2); color: var(--texte); padding: 6px 8px; }
.cj textarea { width: 100%; min-height: 70px; resize: vertical; }
.cj-form { display: grid; gap: 8px; max-width: 360px; }
.cj-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cj-vitrine { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ---------------- carte ---------------- */
.cc { --r: var(--c-commune); position: relative; width: 250px; aspect-ratio: 5 / 7.4; border-radius: 14px; padding: 7px;
      background: linear-gradient(145deg, color-mix(in srgb, var(--r) 70%, #fff 10%), color-mix(in srgb, var(--r) 55%, #000 45%));
      box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6); color: #f3eee6; user-select: none;
      transition: transform .15s ease-out; font-size: 12px; flex: none; }
.cc.cc-peu_commune { --r: var(--c-peu_commune); }
.cc.cc-rare { --r: var(--c-rare); }
.cc.cc-super_rare { --r: var(--c-super_rare); }
.cc.cc-ultra_rare { --r: var(--c-ultra_rare); }
.cc.cc-legendaire { --r: var(--c-legendaire); }
.cc.cc-bonus { --r: var(--c-bonus); }
.cc-in { position: relative; height: 100%; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column;
         background: linear-gradient(180deg, #1d1a22, #121016); border: 1px solid rgba(0,0,0,.7); }
.cc-tete { display: flex; align-items: baseline; gap: 6px; padding: 5px 8px 4px; background: rgba(0,0,0,.35);
           border-bottom: 1px solid color-mix(in srgb, var(--r) 60%, transparent); }
.cc-titre { font-weight: 700; font-size: 12.5px; line-height: 1.2; flex: 1; overflow: hidden; text-overflow: ellipsis;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-num { font-size: 10px; color: color-mix(in srgb, var(--r) 80%, #fff); font-weight: 700; white-space: nowrap; }
.cc-image { position: relative; flex: 0 0 47%; background: #0b0a0d; overflow: hidden; }
.cc-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.cc-image .cc-initiales { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; font-weight: 800;
                          color: color-mix(in srgb, var(--r) 70%, #fff); background: radial-gradient(circle, color-mix(in srgb, var(--r) 35%, #000), #000); }
.cc-gemme { position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 800;
            background: var(--r); color: #120f0a; box-shadow: 0 0 8px var(--r); letter-spacing: .5px; }
.cc-faction { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 700;
              background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.2); }
.cc-faction.f-Reike { color: #ff8a80; } .cc-faction.f-République { color: #8ab8ff; } .cc-faction.f-Citoyen { color: #9be3a8; }
.cc-bandeau { padding: 3px 8px; font-size: 10.5px; color: #cfc7bb; background: rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-caps { padding: 4px 8px 2px; display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; line-height: 1.25; }
.cc-cap b { color: color-mix(in srgb, var(--r) 70%, #fff); font-weight: 700; }
.cc-cap.sig b { color: #ffd479; text-shadow: 0 0 6px rgba(255,190,80,.6); }
.cc-cap.faib b { color: #ff8a80; }
.cc-cap span { color: #bdb5a8; }
.cc-desc { padding: 3px 8px 6px; font-size: 10.5px; line-height: 1.3; font-style: italic; color: #d8d0c4; }
/* capacités + description : défilent à la molette quand elles dépassent (fine barre aux couleurs de la rareté) */
.cc-texte { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
            scrollbar-color: color-mix(in srgb, var(--r) 60%, transparent) transparent; }
.cc-texte::-webkit-scrollbar { width: 5px; }
.cc-texte::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--r) 60%, transparent); border-radius: 3px; }
.cc-stats { display: flex; justify-content: space-between; padding: 4px 10px 6px; font-weight: 800; font-size: 15px;
            background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); }
.cc-stats .atk { color: #ff9c7a; } .cc-stats .def { color: #8fc3ff; }
.cc-qte { position: absolute; bottom: -8px; right: -8px; background: var(--accent); color: #1a1408; font-weight: 800; border-radius: 12px;
          padding: 1px 8px; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.6); z-index: 3; }
.cc-nouvelle { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #ff5a5a; color: #fff; font-weight: 800;
               border-radius: 10px; padding: 1px 9px; font-size: 11px; z-index: 3; box-shadow: 0 0 10px #ff5a5a; white-space: nowrap; }

/* repère « moi » sur la collection d'un autre joueur, et étiquettes des échanges */
.cc-marque { position: absolute; top: -8px; left: -8px; z-index: 3; font-weight: 800; font-size: 12px; border-radius: 10px; padding: 1px 7px;
             box-shadow: 0 2px 6px rgba(0,0,0,.6); background: #2a2530; border: 1px solid #4a4356; white-space: nowrap; }
.cc-marque.ok { color: #7fd6a0; } .cc-marque.ko { color: #ff8a80; } .cc-marque.dbl { color: #1a1408; background: #d8a24a; border-color: #d8a24a; }
.cc-marque.nouv { color: #1a1408; background: #7fd6a0; border-color: #7fd6a0; font-size: 10.5px; }
.cj-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #ff5a5a; color: #fff; font-size: 11px; font-weight: 800; text-align: center; }

/* reflets : super rare = reflet, ultra rare = holo, légendaire = prisme animé, bonus = aurore */
.cc-super_rare .cc-in::after, .cc-ultra_rare .cc-in::after, .cc-legendaire .cc-in::after, .cc-bonus .cc-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .22;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.7) 45%, transparent 60%);
  background-size: 250% 250%; background-position: var(--mx, 50%) var(--my, 50%); transition: background-position .1s; }
.cc-ultra_rare .cc-in::after { opacity: .3;
  background: linear-gradient(115deg, #ff005530 10%, #ffd70050 30%, #00ffa050 50%, #00a2ff50 70%, #c800ff40 90%);
  background-size: 300% 300%; }
.cc-legendaire { background: conic-gradient(from var(--ang, 0deg), #ff7a45, #ffd479, #7affc8, #7ab8ff, #d07aff, #ff7a45);
                 animation: cj-tourne 6s linear infinite; box-shadow: 0 0 22px rgba(255,140,70,.55), 0 6px 18px rgba(0,0,0,.6); }
.cc-legendaire .cc-in::after { opacity: .35; animation: cj-reflet 5s ease-in-out infinite;
  background: linear-gradient(115deg, #ff005540 10%, #ffd70060 30%, #00ffa060 50%, #00a2ff60 70%, #c800ff50 90%); background-size: 300% 300%; }
.cc-bonus { background: linear-gradient(135deg, #1b6f75, #3fd0c9, #b9fff9, #3fd0c9, #1b6f75); background-size: 300% 300%;
            animation: cj-reflet 7s ease-in-out infinite; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes cj-tourne { to { --ang: 360deg; } }
@keyframes cj-reflet { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* petite carte (grilles) */
.cc.petite { width: 150px; font-size: 10px; padding: 5px; border-radius: 10px; cursor: pointer; }
.cc.petite .cc-in { border-radius: 7px; }
.cc.petite .cc-image { flex-basis: 62%; }
.cc.petite .cc-titre { font-size: 10.5px; -webkit-line-clamp: 2; }
.cc.petite .cc-texte { display: none; }
.cc.petite .cc-bandeau { font-size: 9px; }
.cc.petite .cc-stats { font-size: 12.5px; margin-top: auto; }
.cc.petite:hover { transform: translateY(-3px); }

/* emplacement manquant */
.cc.manquante { background: repeating-linear-gradient(45deg, #1f1c25, #1f1c25 6px, #232029 6px, #232029 12px);
                box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--r) 55%, transparent); animation: none; cursor: default; }
.cc.manquante .cc-in { background: transparent; border: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--r) 70%, #777);
                       font-size: 13px; text-align: center; font-weight: 700; }
.cc.manquante .cc-in::after { display: none; }

/* grande carte (pop-up) avec inclinaison à la souris */
.cj-zoom { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.cj-zoom .cc { width: 320px; font-size: 13px; }
.cj-zoom .cc .cc-titre { font-size: 15px; }
.cj-zoom .cc .cc-caps, .cj-zoom .cc .cc-desc, .cj-zoom .cc .cc-bandeau { font-size: 12px; }
.cj-zoom .cc .cc-stats { font-size: 19px; }
@media (max-width: 720px) { .cj-zoom { grid-template-columns: 1fr; justify-items: center; } .cj-zoom .cc { width: min(320px, 86vw); } }

/* ---------------- booster ---------------- */
.cj-paquet { width: 190px; height: 270px; border-radius: 14px; margin: 10px auto; position: relative; cursor: pointer;
             background: linear-gradient(160deg, #3a1c10, #b5471d 40%, #f2a14a 55%, #7a2a12 70%, #2a120a);
             box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,210,150,.35); display: grid; place-items: center;
             color: #fff2df; text-align: center; font-weight: 800; letter-spacing: 1px; transition: transform .2s; }
.cj-paquet:hover { transform: translateY(-4px) rotate(-1deg); }
.cj-paquet small { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0; opacity: .85; margin-top: 6px; }
.cj-paquet.tremble { animation: cj-tremble .5s; }
.cj-paquet.gris { filter: grayscale(.8) brightness(.6); cursor: default; }
@keyframes cj-tremble { 0%,100% { transform: none } 20% { transform: rotate(-4deg) } 40% { transform: rotate(4deg) } 60% { transform: rotate(-3deg) } 80% { transform: rotate(3deg) } }
.cj-tirage { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 16px 0; perspective: 1200px; }
.cj-dos { position: relative; width: 200px; aspect-ratio: 5 / 7.4; cursor: pointer; transform-style: preserve-3d; transition: transform .6s; }
.cj-dos.retournee { transform: rotateY(180deg); cursor: default; }
.cj-dos > .face, .cj-dos > .cc { position: absolute; inset: 0; backface-visibility: hidden; width: 100%; }
.cj-dos > .cc { transform: rotateY(180deg); transform-style: flat; }
.cj-dos:not(.retournee) > .cc .cc-nouvelle { visibility: hidden; }
.cj-dos > .face { border-radius: 14px; display: grid; place-items: center; font-size: 34px; color: #f2a14a;
                  background: repeating-radial-gradient(circle at 50% 50%, #2a1a14 0 8px, #22140f 8px 16px);
                  box-shadow: 0 6px 18px rgba(0,0,0,.6), inset 0 0 0 3px #7a2a12; }
.cj-dos:not(.retournee):hover > .face { box-shadow: 0 6px 18px rgba(0,0,0,.6), inset 0 0 0 3px #f2a14a; }
.cj-dos.lueur-super_rare > .face, .cj-dos.lueur-ultra_rare > .face, .cj-dos.lueur-legendaire > .face, .cj-dos.lueur-bonus > .face { animation: cj-pulse 1.2s infinite; }
@keyframes cj-pulse { 50% { box-shadow: 0 0 26px #ffd479, inset 0 0 0 3px #ffd479; } }
.cj-dos .cc { width: 200px; font-size: 11px; }

/* ---------------- collection ---------------- */
.cj-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cj-prog { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; font-size: 12.5px; color: var(--sourd); }
.cj-prog .p { display: inline-flex; gap: 5px; align-items: center; }
.cj-prog .pt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cj-barre-prog { height: 8px; background: var(--carte2); border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; margin: 4px 0 12px; }
.cj-barre-prog div { height: 100%; background: linear-gradient(90deg, var(--c-rare), var(--c-super_rare), var(--c-legendaire)); }
.cj-serie { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.cj-serie h4 { margin: 0 0 8px; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cj-serie h4 .cj-note { font-weight: 400; }
.cj-rangee { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 10px; }
.cj-grille { display: flex; flex-wrap: wrap; gap: 12px; }
.cj-plus { text-align: center; margin: 12px 0; }

/* ---------------- boutique / joueurs ---------------- */
.cj-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cj-produit { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 14px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.cj-produit .cj-paquet { width: 120px; height: 170px; font-size: 13px; }
.cj-produit.rare .cj-paquet { background: linear-gradient(160deg, #101a3a, #1d47b5 40%, #4aa2f2 55%, #122a7a 70%, #0a122a); box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 3px rgba(150,200,255,.4); }
.cj-prix { font-size: 18px; font-weight: 800; color: var(--c-bonus); }
/* Paquets de la boutique : une couleur par rareté, en couleurs écrites en dur (sans color-mix, que
   certains navigateurs ne comprennent pas) + des étoiles, pour les distinguer même sans la couleur. */
.cj-paquet.paquet-peu_commune { background: linear-gradient(160deg, #0f1f16, #2f7a4e 42%, #7fd6a0 55%, #1f5236 70%, #0b1510); box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 3px #5aa878; }
.cj-paquet.paquet-rare        { background: linear-gradient(160deg, #0d1628, #2b5fa8 42%, #8fbdf2 55%, #1d3f73 70%, #0a1020); box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 3px #5a8fd0; }
.cj-paquet.paquet-super_rare  { background: linear-gradient(160deg, #1a0f24, #6e3fa3 42%, #d3b0f5 55%, #4a2a70 70%, #120a1a); box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 3px #a97bd6; }
.cj-paquet.paquet-ultra_rare  { background: linear-gradient(160deg, #241a06, #a8791c 42%, #ffe08a 55%, #7a5510 70%, #1a1204); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 18px rgba(224,176,74,.35), inset 0 0 0 3px #e0b04a; }
.cj-paquet.paquet-legendaire  { background: linear-gradient(160deg, #2a0f08, #c2461c 35%, #ffb36b 50%, #fff0b0 56%, #a8341a 70%, #1c0a05); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 24px rgba(255,122,69,.5), inset 0 0 0 3px #ff7a45;
                                background-size: 200% 200%; animation: cj-reflet 5s ease-in-out infinite; }
.cj-paquet .paquet-etoiles { position: absolute; top: 10px; left: 0; right: 0; font-size: 13px; letter-spacing: 3px; color: #fff6dc; text-shadow: 0 0 6px rgba(0,0,0,.8); }
table.cj-table { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; }
table.cj-table th, table.cj-table td { padding: 7px 10px; border-bottom: 1px solid var(--bord); text-align: left; font-size: 13px; vertical-align: middle; }
table.cj-table th { color: var(--sourd); font-weight: 500; font-size: 12px; text-transform: uppercase; }
table.cj-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.cj-table tr.clic { cursor: pointer; } table.cj-table tr.clic:hover td { background: var(--carte2); }

.cj-archives { margin-top: 18px; }
.cj-archives > summary { cursor: pointer; margin-bottom: 8px; }
.cj-archives .cj-panneau { opacity: .85; }

/* ---------------- combats ---------------- */
.cj-ligne-deck { display: flex; gap: 10px; align-items: center; padding: 4px 0; }
.cj-ligne-deck .cc.petite { width: 92px; }
.cj-ligne-deck button { padding: 1px 7px; font-size: 11px; }
.cj-camp h4 { margin: 6px 0 2px; font-size: 13.5px; }
.cj-arene { gap: 8px; }
.cj-combattant { position: relative; transition: transform .2s, opacity .4s, filter .4s; }
.cj-combattant .cc.petite { width: 112px; cursor: default; }
.cj-combattant.frappe { transform: translateY(-10px) scale(1.05); z-index: 2; }
.cj-combattant.touche { animation: cj-secousse .35s; }
.cj-combattant.mort { opacity: .25; filter: grayscale(1); }
@keyframes cj-secousse { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.cj-pv { height: 6px; background: #3a2230; border-radius: 3px; margin-top: 4px; overflow: hidden; }
.cj-pv div { height: 100%; background: linear-gradient(90deg, #d05a5a, #e0b04a, #5aa878); background-size: 300% 100%; background-position: 100% 0; transition: width .3s; }
.cj-degat { position: absolute; top: 30%; left: 0; right: 0; text-align: center; font-weight: 900; font-size: 20px; color: #ff6a5a;
            text-shadow: 0 2px 6px #000; pointer-events: none; opacity: 0; }
.cj-degat.vole { animation: cj-vole .8s ease-out; }
@keyframes cj-vole { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-34px); } }
.cj-explication { position: sticky; top: 56px; z-index: 5; background: #231d2b; border: 2px solid var(--accent); border-radius: 12px;
                  padding: 10px 16px 12px; margin: 10px 0; box-shadow: 0 10px 30px rgba(0,0,0,.6); font-size: 13.5px; line-height: 1.5; }
.cj-explication h3 { margin: 2px 0 6px; font-size: 16px; color: var(--accent); }
.cj-explication p { margin: 6px 0; } .cj-explication ul, .cj-explication ol { margin: 4px 0; padding-left: 20px; }
.cj-combattant.surligne .cc { box-shadow: 0 0 0 3px var(--accent), 0 0 22px rgba(216,162,74,.7); }
.cj-aide-deck summary { cursor: pointer; font-weight: 700; }
.cj-aide-deck li { margin: 3px 0; }
.cj-resultat { text-align: center; font-size: 34px; font-weight: 900; margin: 14px 0 4px; letter-spacing: 2px; }
.cj-resultat.gagne { color: #ffd479; text-shadow: 0 0 18px rgba(255,190,80,.6); }
.cj-resultat.perdu { color: #b98a8a; }

/* ---------------- admin ---------------- */
.cj-job { font: 12px/1.5 ui-monospace, Consolas, monospace; background: #0f0e12; border: 1px solid var(--bord); border-radius: 6px;
          padding: 8px 10px; max-height: 200px; overflow: auto; white-space: pre-wrap; color: #c9c2d1; margin-top: 8px; }
.cj-aserie { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; margin-bottom: 8px; }
.cj-aserie > summary { padding: 8px 12px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cj-aserie > summary::-webkit-details-marker { display: none; }
.cj-aserie[open] > summary { border-bottom: 1px solid var(--bord); }
.cj-aserie .corps { padding: 10px 12px; }
.cj-puce { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 11px; background: var(--bord); color: var(--texte); }
.cj-puce.alerte { background: #5a2c2c; } .cj-puce.ok { background: #2c4a37; } .cj-puce.mi { background: #5a4a26; }
.cj-reserve { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.cj-reserve figure { margin: 0; width: 86px; text-align: center; font-size: 10px; color: var(--sourd); }
.cj-reserve img { width: 86px; height: 120px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; background: #000; }
.cj-reserve img.choisie { border-color: var(--accent); }
.cj-acarte { display: grid; grid-template-columns: 262px 1fr; gap: 16px; padding: 12px 0; border-top: 1px dashed var(--bord); }
.cj-acarte .apercu .cc-image { cursor: grab; touch-action: none; }
.cj-acarte .apercu .cc-image:active { cursor: grabbing; }
.cj-cadrage input[type=range] { width: 110px; vertical-align: middle; }
.cj-acarte .apercu { cursor: pointer; }
.cj-editeur { display: grid; grid-template-columns: 270px 1fr; gap: 18px; align-items: start; }
.cj-editeur .apercu .cc { width: 260px; }
.cj-ed-droite .cj-reserve { max-height: 330px; overflow-y: auto; padding: 2px; }
@media (max-width: 720px) { .cj-editeur { grid-template-columns: 1fr; justify-items: center; } }
.cj-acarte .champs { display: grid; gap: 6px; }
.cj-acarte .ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cj-acarte input[type=number] { width: 80px; }
@media (max-width: 640px) { .cj-acarte { grid-template-columns: 1fr; } .cc { width: min(250px, 80vw); } }
dialog.cj-dialog { background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-radius: 12px; padding: 16px; max-width: min(760px, 95vw); }
dialog.cj-dialog::backdrop { background: rgba(0,0,0,.65); }