/* MA CARTE DE JOUEUR (carte.css) : styles de la page « Ma carte de joueur » (atelier, étapes, aperçu, légende des rangs).
   Chargé seulement par cette page, après style.css ; les jetons (couleurs, polices, rayons, espaces) sont ceux du design system v3.

   LA CARTE ELLE-MÊME n'est plus un composant HTML : assets/js/carte-rendu.js la dessine sur un canvas, dans le modèle choisi
   par le visiteur (Néon par défaut, Blason, Stade, Vignette : voir l'en-tête de carte-rendu.js et le sélecteur .cj-modeles en bas),
   et ce même dessin sert d'aperçu dans la page (canvas .cj-apercu-canvas, redimensionné par CSS) et d'image exportée
   (canvas .cj-canvas hors écran, 1200 × 1800 ou story 1080 × 1920). Une seule source de vérité : ce qu'on voit est ce qu'on télécharge.

   PRINCIPE DU DESSIN (Néon) : carte très sombre (bleu nuit assombri de 40 %, #0A1320), grille de terrain en perspective au fond,
   photo en duotone (nuit → bleu terrain → couleur du rang) fondue sur la grille, note globale dans un anneau de progression néon,
   poste (DRO, GAU, POL) à sa droite, pseudo en lettres néon, 6 attributs en anneaux, équerres vertes aux coins, contour dans la
   couleur du rang (Élite : reflet tournant, animé seulement à l'écran et hors prefers-reduced-motion).
   Le rang change la couleur dominante : corail (bronze), argent froid (argent), sable (or), vert énergie (élite).

   CONTRASTES (WCAG) sur le fond de la carte #0A1320, et au pire sur le cœur du halo bleu terrain (#0E354F) :
   blanc froid 17,3 / 11,9 (pseudo, chiffres, APPRENDRE, DRO) · --muted 8,8 / 6,0 (GLOBALE, POSTE, VOL…) · --dim 6,6 (mention, bas : 5,8) ·
   --sky 7,9 / 5,4 (DROITE) · PADEL vert 14,3 ; capsule de rang (texte dans la couleur du rang, sur fond à 75 %) :
   corail 6,6 · argent 10,8 · sable 10,6 · vert 14,3. Tout ≥ 4,5:1.
   AUTRES MODÈLES (calcul sur les couleurs, et moyenne mesurée en pixels sous le texte, grain compris) :
   Blason : encre bleu nuit approfondi #0C1728 sur le métal, jamais plus sombre que la couleur du rang : corail 6,4 · argent 10,5 ·
     sable 10,2 (mesuré 7,0 / 11,0 / 10,7) ; Élite : blanc froid 18,2 et vert 15,1 sur métal noir (9,2 / 7,6 sur la lueur verte).
   Stade : blanc froid 15,4 / 9,7 au cœur du halo · --muted 7,8 · --dim 5,9 · chiffres dans la couleur du rang 5,9 (corail) à 12,7
     sur bleu nuit, corail mesuré 4,6 sous les chiffres d'attributs (texte grand et gras : seuil 3:1) · bleu nuit sur la bande métal,
     arrêt le plus sombre = couleur du rang assombrie de 10 % : 4,8 (corail) à 10,2 · nom du rang sur le biseau 9,9 à 13,9.
   Vignette : bleu nuit sur blanc 15,4, sur papier crème #F6EBDA 14,0 · encre douce #546070 5,9 / 5,4 (story #F7E3C4 : 5,1) ·
     bleu nuit sur la couleur du rang (pastille, ruban, capsule) : corail 5,9 · argent 9,6 · sable 9,4 · vert 12,7 · ciel (reflet Élite) 7,0 ·
     poste : papier crème ou vert sur bleu nuit 14,0 / 12,7. */

/* ---- Variables propres à la carte : argent (blanc froid grisé, 9,6:1 sur le bleu nuit) et triplet du sable pour les transparences.
   Lues aussi par carte-rendu.js (--cj-argent). ---- */
:root{--cj-argent:#B8C7DA;--cj-argent-rgb:184,199,218;--cj-sand-rgb:255,181,71}
/* ---- Rangs : couleur dominante (légende des rangs, tag de rang) ---- */
.rang-bronze{--cj-rang:var(--coral);--cj-rang-rgb:var(--coral-rgb);--cj-rang-nom:"Bronze"}
.rang-argent{--cj-rang:var(--cj-argent);--cj-rang-rgb:var(--cj-argent-rgb);--cj-rang-nom:"Argent"}
.rang-or{--cj-rang:var(--sand);--cj-rang-rgb:var(--cj-sand-rgb);--cj-rang-nom:"Or"}
.rang-elite{--cj-rang:var(--turf);--cj-rang-rgb:var(--turf-rgb);--cj-rang-nom:"Élite"}

/* ---- La page : atelier (questionnaire à gauche, aperçu à droite), actions, légende des rangs, dépôt de photo ---- */
.cj-atelier{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(min(100%,320px),.9fr);gap:var(--s-6);align-items:start}
.cj-apercu{position:sticky;top:84px;display:grid;gap:var(--s-4)}
/* Aperçu : le canvas dessiné par carte-rendu.js, redimensionné par CSS ; place réservée (2:3) avant le premier dessin */
.cj-apercu-canvas{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:2/3;margin:0 auto;border-radius:calc(26 / 600 * 100%) / calc(26 / 900 * 100%);
  box-shadow:var(--shadow),0 0 60px rgba(var(--cj-rang-rgb,var(--terrain-rgb)),.18)}
.cj-apercu-canvas.rang-elite{box-shadow:var(--shadow),0 0 80px rgba(var(--cj-rang-rgb),.28)}
.cj-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3)}
.cj-canvas{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none} /* canvas de rendu hors écran (export) */
.cj-formats{display:flex;gap:var(--s-2);flex-wrap:wrap}
.cj-formats label{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--field-line);border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-s);color:var(--muted);cursor:pointer}
.cj-formats label:has(input:checked){background:var(--turf);border-color:var(--turf);color:var(--accent-fg);font-weight:800}
.cj-formats input{position:absolute;opacity:0;width:0;height:0}
.cj-formats label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.cj-rangs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:var(--s-2)}
.cj-rangs li{display:grid;gap:2px;padding:var(--s-3) var(--s-4);border:1px solid rgba(var(--cj-rang-rgb),.45);border-left:4px solid var(--cj-rang);border-radius:var(--r-s);background:var(--glass)}
.cj-rangs b{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;letter-spacing:.03em;color:var(--cj-rang)}
.cj-rangs span{font-size:var(--fs-s);color:var(--muted)}
.cj-depot{display:grid;gap:var(--s-2);justify-items:center;padding:var(--s-5) var(--s-4);border:1px dashed var(--field-line);border-radius:var(--r);background:rgba(0,0,0,.2);text-align:center;color:var(--muted);font-size:var(--fs-s)}
.cj-depot:focus-within{border-color:var(--focus);outline:3px solid var(--focus);outline-offset:2px}
.cj-depot input{position:absolute;opacity:0;width:0;height:0}
.cj-depot b{color:var(--fg)}
.cj-depot img{width:96px;height:96px;object-fit:cover;object-position:50% 22%;border-radius:50%;border:2px solid var(--cj-rang,var(--line-2))}
@media (max-width:860px){
  .cj-atelier{grid-template-columns:1fr}
  .cj-apercu{position:static}
}

/* ---- Ajouts dev-front (29/10/2026) : éléments de la page non couverts ci-dessus (à reprendre librement par le webdesigner) :
   fil d'étapes, étapes, liste des notes (curseurs ±5), dépôt de photo (deux boutons), cadre de recadrage, tag de rang ---- */
.cj-etapes{display:grid;gap:var(--s-4);min-width:0}
.cj-etape[hidden],.cj-apercu[hidden]{display:none} /* .card et .cj-apercu posent un display : l'attribut hidden doit gagner */
.cj-etape h2{margin-bottom:var(--s-3)}
.cj-etape h2:focus{outline:none}
.cj-etape h2:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:4px}
.cj-etape .btns{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-4)}
.cj-etape .btn{min-height:48px}
/* « Faire une nouvelle carte » : en haut de l'atelier (carte retrouvée) et à l'étape Carte, aide juste sous le bouton */
.cj-nouvelle[hidden]{display:none}
.cj-nouvelle .btns{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.cj-nouvelle .btn{min-height:48px}
.cj-nouvelle .champ-aide{margin-top:var(--s-2)}
.cj-etape .msg{margin-top:var(--s-4)}
.cj-etape .msg a{color:var(--turf)}
.cj-pas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2);counter-reset:pas}
.cj-pas li{counter-increment:pas;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px 0 6px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cj-pas li::before{content:counter(pas);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--glass-2);color:var(--fg);font-family:var(--display);font-size:.9rem}
.cj-pas li[aria-current="step"]{border-color:var(--turf);color:var(--fg)}
.cj-pas li[aria-current="step"]::before,.cj-pas li.cj-pas-fait::before{background:var(--turf);color:var(--accent-fg)}
.cj-pas li.cj-pas-fait{color:var(--muted)}
.cj-base{margin-bottom:var(--s-4)}
.cj-base-choix{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-2);min-height:44px;cursor:pointer}
.cj-base-choix input{width:20px;height:20px;accent-color:var(--turf)}
.cj-globale-txt{display:flex;align-items:center;gap:var(--s-3);font-weight:700;color:var(--muted)}
.cj-globale-txt b{font-family:var(--display);font-weight:900;font-size:2.6rem;line-height:1;color:var(--sand);font-variant-numeric:tabular-nums}
.tag.rang-bronze{border-color:var(--coral);color:var(--coral)}
.tag.rang-argent{border-color:var(--cj-argent);color:var(--cj-argent)}
.tag.rang-or{border-color:var(--sand);color:var(--sand)}
.tag.rang-elite{border-color:var(--turf);color:var(--turf)}
.cj-notes #cj-postes,.cj-etape .phases{margin:var(--s-3) 0 var(--s-4)}
.cj-notes-liste{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-3)}
.cj-note{display:grid;gap:4px;padding:var(--s-3) 0;border-top:1px solid var(--line)}
.cj-note-libelle{display:grid;gap:2px}
.cj-note-libelle b{font-weight:800}
.cj-note-libelle small{color:var(--dim);font-size:var(--fs-s)}
.cj-note .range input{min-height:44px;accent-color:var(--turf)}
.cj-note .range output{font-size:1.6rem}
.cj-depot{position:relative}
.cj-depot-boutons{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}
.cj-depot label.btn{min-height:48px;text-transform:none;letter-spacing:0;font-size:var(--fs-s)}
.cj-recadrage{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.cj-recadrage h3{font-size:1.1rem}
.cj-cadre{display:block;width:100%;max-width:300px;aspect-ratio:5/4;border:1px solid var(--field-line);border-radius:var(--r-s);background:var(--navy);touch-action:none;cursor:grab}
.cj-cadre:active{cursor:grabbing}
.cj-cadre:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.cj-recadrage .range label{font-weight:700;font-size:var(--fs-s)}
.cj-recadrage .range output{font-size:1.2rem;color:var(--fg)}
.cj-formats-bloc{border:0;padding:0;margin:var(--s-4) 0}
.cj-formats-bloc legend{font-weight:700;font-size:var(--fs-s);margin-bottom:var(--s-2)}
.cj-actions .btn{min-height:48px}
.cj-apercu h2{margin:0}

/* ---- Sélecteur de modèle (Néon, Blason, Stade, Vignette), dans l'étape « Ta carte » (HTML posé par carte.js) :
   .cj-modeles-bloc > h3 + .cj-modeles[role=group] > button.cj-modele[aria-pressed][data-modele] > canvas (miniature dessinée par
   carte-rendu.js avec les vraies données, 300 × 450) + span.cj-modele-nom. Grille de 4 colonnes, 2 × 2 sur téléphone.
   État choisi : contour et fond vert énergie, nom en blanc gras, coche (pas seulement la couleur). Focus clavier : anneau sable.
   La miniature garde sa place (ratio 2:3) avant d'être dessinée : pas de saut. ---- */
.cj-modeles-bloc{display:grid;gap:var(--s-3);margin:var(--s-4) 0}
.cj-modeles-bloc[hidden]{display:none}
.cj-modeles-bloc h3{font-size:1.1rem}
.cj-modeles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin:0;padding:0;list-style:none}
.cj-modele{position:relative;display:grid;justify-items:center;align-content:start;gap:var(--s-2);min-width:0;min-height:44px;margin:0;padding:var(--s-2) var(--s-2) var(--s-3);
  border:1px solid var(--field-line);border-radius:var(--r-s);background:var(--glass);color:var(--muted);
  font:700 var(--fs-s)/1.2 var(--body);cursor:pointer;transition:border-color var(--t),background-color var(--t),color var(--t)}
.cj-modele canvas{display:block;width:100%;max-width:150px;height:auto;aspect-ratio:2/3;border-radius:6px;background:var(--bg-2)}
.cj-modele-nom{text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-xs);overflow-wrap:anywhere;text-align:center}
.cj-modele:hover{border-color:var(--fg);color:var(--fg)}
.cj-modele[aria-pressed="true"]{border-color:var(--turf);background:rgba(var(--turf-rgb),.12);color:var(--fg);box-shadow:inset 0 0 0 1px var(--turf)}
.cj-modele[aria-pressed="true"] .cj-modele-nom{font-weight:800}
/* Coche de l'état choisi (pastille vert énergie, texte bleu nuit 12,7:1) */
.cj-modele[aria-pressed="true"]::after{content:"✓";position:absolute;top:4px;right:4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--turf);color:var(--accent-fg);font-size:13px;font-weight:900}
.cj-modele:focus{outline:none}
.cj-modele:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:480px){.cj-modeles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.cj-modele{transition:none}}
/* Aperçu : le modèle choisi est aussi en data-modele. Vignette (papier clair) : halo plus doux, la carte claire suffit à ressortir */
.cj-apercu-canvas[data-modele="vignette"]{box-shadow:var(--shadow),0 0 40px rgba(var(--cj-rang-rgb,var(--terrain-rgb)),.12)}

/* ---- Compteur « N cartes créées » (#cj-compteur), sur la même ligne que la pastille de présence (p.presence-ligne, style.css).
   Il passe toujours à la ligne et garde sa hauteur même vide : quand le nombre arrive, rien ne bouge (390 et 320 px compris). ---- */
#cj-compteur{flex:1 0 100%;min-height:1.5em}

/* ---- Notes libres (30/10/2026, dev-front) : un curseur 1 à 99 + un champ numérique par attribut, sous-titres Poste et Rang.
   Le champ garde sa largeur fixe (2 chiffres) ; le curseur prend le reste, à 320 px compris. ---- */
.cj-sous-titre{font-size:1.1rem;margin-top:var(--s-4)}
.cj-note .range{gap:var(--s-3)}
.cj-note .range input[type=number]{flex:0 0 4.6rem;width:4.6rem;min-height:48px;padding:8px 6px;text-align:center;
  background:rgba(0,0,0,.25);border:1px solid var(--field-line);border-radius:var(--r-s);color:var(--sand);
  font-family:var(--display);font-weight:900;font-size:1.5rem;font-variant-numeric:tabular-nums;color-scheme:dark}
.cj-note .range input[type=number]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}