/* Éditeur individuel canonique : règles de disposition extraites sans duplication
   de l'éditeur Cartes à pinces. Les autres ateliers consomment les mêmes classes. */
/* Sur téléphone, conserver le tiroir existant et la carte en plein espace disponible. */
/* Editeur individuel : l’élément actif et ses réglages, sans panneaux généraux concurrents. */
@media(min-width:801px){
  .pin-layout.pin-unified-edit-mode{
    grid-template-columns:minmax(260px,26%) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) 78px;
    gap:10px;
  }
  .pin-unified-edit-mode .pin-preview-panel{grid-column:1;grid-row:1}
  .pin-unified-edit-mode .pin-panel{grid-column:2;grid-row:1;padding:8px}
  .pin-unified-edit-mode .pin-card-film{grid-column:1/-1;grid-row:2}
  .pin-unified-edit-mode .pin-library-panel{display:none}
}
.pin-unified-edit-mode .pin-settings-rail,
.pin-unified-edit-mode #pin-toggle-settings{display:none!important}
.pin-unified-edit-mode .pin-settings-scroll{display:none!important}
.pin-unified-edit-mode .pin-settings-main{gap:6px}
.pin-unified-edit-mode .pin-picto-workspace{
  display:block;flex:1;min-height:0;border:0;overflow:hidden;background:#fff
}
.pin-picto-workspace[hidden]{display:none!important}
.pin-unified-edit-mode .pin-panel-heading{min-height:26px}
.pin-unified-edit-mode .pin-panel-heading h2{font-size:16px}
.pin-unified-edit-mode .pin-preview-panel{padding:9px}
.pin-unified-edit-mode .pin-preview-footer,
.pin-unified-edit-mode #pin-status{display:none}
.pin-unified-edit-mode .pin-card-film{
  background:#fff;border:1px solid #e8dfd0;border-radius:15px;height:78px;min-height:78px;
  justify-content:center;padding:6px 12px;gap:10px;overflow:hidden
}
.pin-unified-edit-mode .pin-card-film-items{justify-content:flex-start;gap:7px}
.pin-unified-edit-mode .pin-film-card{width:59px;flex-basis:59px;height:62px}
.pin-unified-edit-mode .pin-film-card img{height:36px}
.pin-unified-edit-mode .pin-sheet-space{align-items:flex-start;padding-top:18px}
.pin-unified-edit-mode .pin-detail-card{max-width:100%}

/* La même disposition s'applique au composant et à l'éditeur natif des pinces. */
.ef-canonical-holder{flex:1 1 auto;min-height:0;min-width:0;display:flex;overflow:hidden}
.ef-canonical-holder[hidden]{display:none!important}
.ef-canonical-holder>.pin-layout{flex:1 1 auto;min-width:0;min-height:0;width:100%}
.ef-canonical-holder .pin-sheet-space{padding:12px;overflow:auto;align-items:center}
.ef-canonical-holder .pin-detail-card{width:100%;height:100%;align-items:center;justify-content:center}
.ef-canonical-holder .pin-panel{display:flex;flex-direction:column;min-width:0;padding:8px;overflow:hidden}
.ef-canonical-holder .pin-settings-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.ef-canonical-holder .pin-picto-workspace{flex:1 1 auto;min-height:0}
.ef-canonical-holder .pin-picto-workspace iframe{width:100%;height:100%;border:0}
.ef-canonical-holder .pin-card-film{display:flex;grid-column:1/-1}
/* Une liste plus large que le bandeau doit toujours commencer à gauche.
   safe center conserve le centrage uniquement lorsque toutes les vignettes tiennent. */
.ef-canonical-holder .pin-card-film-items{flex:1 1 auto;min-width:0;justify-content:flex-start;justify-content:safe center}
.ef-canonical-holder .pin-film-visual{height:38px;width:50px;display:grid;place-items:center;overflow:hidden;flex:none}
.ef-canonical-holder .pin-film-card .pin-film-visual+.pin-film-number{font-size:10px;max-width:58px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.ef-canonical-holder .gr-film-stage{height:36px;width:46px;display:grid;place-items:center}
.ef-canonical-holder .gr-film-stage .gr-canonical-frame{height:auto;width:auto;box-sizing:border-box;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none}
.ef-canonical-holder .gr-film-stage .gr-object{width:100%;height:100%;font-size:10px;display:flex;align-items:center;justify-content:center}
.ef-canonical-holder .gr-film-stage svg{width:90%;height:90%}
.ef-canonical-holder .gr-film-stage .gr-placeholder{font-size:9px}
.ef-canonical-holder .pin-preview-panel{min-width:0;min-height:0}
.ef-canonical-holder .chg-individual-stage{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;overflow:hidden}
.ef-canonical-holder .chg-individual-stage img{max-height:90%;max-width:95%;object-fit:contain}
.ef-canonical-holder .chg-individual-stage svg{width:95%;max-height:50%;overflow:visible}
.ef-canonical-holder .chg-individual-empty{max-width:270px;text-align:center;line-height:1.5;color:#50657a;font-size:13px}
.ef-canonical-holder .pin-panel-heading{flex:none}
.ef-canonical-holder .ef-canonical-pick{margin:4px 8px 7px;flex:none;align-self:flex-start}
.ef-canonical-holder .ef-individual-status{font-size:11px;color:#52697d;margin:6px 8px}
@media(max-width:800px){
 .ef-canonical-holder{min-height:620px;overflow:auto}
 .ef-canonical-holder>.pin-layout{display:flex;flex-direction:column;overflow-y:auto}
 .ef-canonical-holder .pin-preview-panel{min-height:240px;max-height:320px}
 /* Le tiroir mobile de Cartes à pince ne doit JAMAIS recouvrir l'éditeur canonique.
    Ce sélecteur est volontairement limité au holder commun : Pinces natif reste intact. */
 .ef-canonical-holder>.pin-layout.pin-unified-edit-mode>.pin-panel{
  position:relative!important;inset:auto!important;left:auto!important;right:auto!important;
  top:auto!important;bottom:auto!important;transform:none!important;
  width:100%!important;max-width:none!important;height:auto;min-height:360px;
  z-index:auto;box-shadow:none;
 }
 .ef-canonical-holder .pin-card-film{order:3;min-height:65px}
}
/* Réglages individuels de tracé : champs existants déplacés dans le vrai éditeur
   de Cartes à pinces. Styles propriétaires ici, aucun double CSS dans Chemins. */
.ef-canonical-holder .chg-individual-trace-fields{
 flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;align-content:start;
 display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 12px;
 padding:9px 13px 13px;box-sizing:border-box;
 user-select:none;-webkit-user-select:none;
}
.ef-canonical-holder .chg-individual-trace-fields label{min-width:0;color:#526e84;font-size:11px;font-weight:800;line-height:1.3}
.ef-canonical-holder .chg-trace-choice{grid-column:span 2;display:grid;gap:5px;align-content:start}
.ef-canonical-holder .chg-trace-choice select{box-sizing:border-box;width:100%;min-width:0;min-height:37px;padding:7px 9px;border:1px solid #e2ded4;background:#fff;border-radius:9px;color:#173b5b;font:inherit;font-weight:650}
.ef-canonical-holder .chg-trace-range{grid-column:span 3;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:5px 8px;align-items:center;padding:9px 11px;border:1px solid #e9e0d3;border-radius:11px;background:#fff}
.ef-canonical-holder .chg-trace-range-label{grid-column:1;grid-row:1}
.ef-canonical-holder .chg-trace-value{grid-column:2;grid-row:1;min-width:27px;text-align:right;color:#173b5b;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.ef-canonical-holder .chg-trace-range input[type=range]{grid-column:1/-1;grid-row:2;width:100%;min-width:0;margin:0;height:22px;accent-color:#edae09;cursor:ew-resize;touch-action:none}
.ef-canonical-holder .chg-color-field{grid-column:span 6;display:grid;gap:8px;padding:10px 11px;border:1px solid #e9e0d3;border-radius:11px;font-size:11px;color:#526e84}
.ef-canonical-holder .chg-color-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ef-canonical-holder .chg-color-heading strong{font-weight:800}
.ef-canonical-holder .chg-tone-switch{display:flex;align-items:center;gap:4px}
.ef-canonical-holder .chg-tone-switch button{font-size:11px;line-height:1;min-height:26px;padding:5px 9px;border:1px solid #d7e1e5;border-radius:7px;background:#fff;cursor:pointer;color:#173b5b;font-weight:800}
.ef-canonical-holder .chg-tone-switch button[aria-pressed=true]{background:#fff3ce;border-color:#f0b318}
.ef-canonical-holder .chg-colors{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.ef-canonical-holder .chg-color{box-sizing:border-box;flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid #bdc9d2;cursor:pointer;padding:0}
.ef-canonical-holder .chg-color[aria-pressed=true]{outline:2px solid #e4a20a;outline-offset:2px}
.ef-canonical-holder .chg-custom-color{box-sizing:border-box;width:32px;height:28px;border:0;padding:0;background:transparent;cursor:pointer}
.ef-canonical-holder .chg-copy-trace{grid-column:span 6;min-height:34px;font-size:11px;line-height:1.3;white-space:normal;padding:7px 9px;background:#fff;border:1px solid #d7e1e5;border-radius:9px;cursor:pointer;color:#173b5b;font-weight:800}
@media(max-width:1050px){.ef-canonical-holder .chg-trace-choice{grid-column:span 3}.ef-canonical-holder .chg-trace-range{grid-column:span 6}}
@media(max-width:880px){.ef-canonical-holder .chg-trace-choice,.ef-canonical-holder .chg-trace-range{grid-column:span 6}}

@media print{.ef-canonical-holder{display:none!important}}

/* Le moteur natif et les champs propres a chaque activite occupent le meme panneau. */
.ef-canonical-holder .ef-individual-specific:not([hidden]){min-width:0;min-height:0;overflow:auto;padding:7px 9px;flex:1 1 auto}
.ef-canonical-holder .ef-individual-specific[hidden]{display:none!important}

/* Règle universelle Atelier : aucun panneau général ne peut rester affiché
   pendant la modification individuelle. Même contrat pour les 10 éditeurs
   qui utilisent le composant canonique, sans CSS parallèle par jeu. */
:is(#view-tri,#view-suites,#view-denombrer,#view-manque,#view-grille,#view-chemins,#view-memory,#view-loto,#view-labyrinthe,#view-puzzle).ef-canonical-active > :not(.ef-activity-header):not(.ef-canonical-holder){display:none!important}
:is(#view-tri,#view-suites,#view-denombrer,#view-manque,#view-grille,#view-chemins,#view-memory,#view-loto,#view-labyrinthe,#view-puzzle).ef-canonical-active > .ef-canonical-holder{display:flex!important;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden}
.ef-canonical-holder .ef-canonical-image-preview{height:100%;width:100%;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden}
.ef-canonical-holder .ef-canonical-image-preview > img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ef-canonical-holder .gr-canonical-stage .gr-canonical-frame{box-sizing:border-box;height:auto;width:auto;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.ef-canonical-holder .gr-canonical-stage .gr-canonical-frame .gr-object{min-height:0;height:100%;width:100%;overflow:hidden}
.ef-canonical-holder .gr-canonical-stage .gr-canonical-frame .gr-object svg{width:90%;height:90%;max-width:none;max-height:none;flex:none}
.ef-canonical-holder .ef-canonical-empty{font-size:13px;color:#627989;text-align:center}
.ef-canonical-holder .sui-symbol{max-width:95%;max-height:95%}
.ef-canonical-holder .tri-detail-stage{max-width:100%;max-height:100%}
.ef-canonical-holder .ef-individual-specific .tri-part-settings{padding:0;height:100%;overflow:auto}
.ef-canonical-holder #sui-sign-picker{display:grid;gap:10px;padding:8px;overflow:auto}
.ef-canonical-holder #sui-sign-picker[hidden]{display:none!important}
/* Grille : les vrais champs conservent leur écouteurs. La navigation du haut
   et l'ancien dock horizontal ne sont pas répétés dans l'éditeur canonique. */
.ef-canonical-holder #gr-individual-dock{display:flex;flex-direction:column;min-height:0;max-height:none;flex:1 1 auto;overflow:auto;border:0;background:transparent}
.ef-canonical-holder #gr-individual-dock>.gr-dock-head,
.ef-canonical-holder #gr-deposit-controls .gr-block-nav {display:none}
.ef-canonical-holder #gr-deposit-controls{display:flex;min-height:0;max-height:none;padding:6px;overflow:auto}
.ef-canonical-holder .gr-canonical-stage .gr-object{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center}

/* Les anciens jeux n'avaient pas de conteneur d'édition à hauteur de fenêtre.
   Le même composant individuel a besoin de la même hauteur utile que les
   ateliers récents, indépendamment de l'ancien panneau de configuration. */
@media (min-width:881px){
  :is(#view-loto,#view-labyrinthe,#view-puzzle).ef-canonical-active:not(:fullscreen){
    display:flex!important;flex-direction:column;gap:10px;
    box-sizing:border-box;height:calc(100dvh - 24px);min-height:560px;
    min-width:0;overflow:hidden;
  }
}

/* Bandeau de carte commun, branché au-dessus du formulaire CAA.
   Memory n'utilise ni consigne particulière ni multiplicateur d'images :
   les cartes d'une paire sont déjà générées automatiquement en double. */
.ef-canonical-holder .ef-canonical-top-controls:not([hidden]){display:block;flex:0 0 auto;min-width:0;padding:0 7px 7px}
.ef-canonical-holder .ef-canonical-top-controls[hidden]{display:none!important}
.ef-canonical-holder .ef-memory-individual-controls{display:grid;grid-template-areas:'context actions cardactions';grid-template-columns:max-content minmax(0,1fr) max-content;min-height:48px;gap:8px 12px;align-items:center}
.ef-canonical-holder .ef-memory-individual-controls .pin-unified-actions{justify-self:start;flex-wrap:wrap;white-space:normal}
.ef-canonical-holder .ef-memory-pair-notice{font-size:11px;color:#587082;white-space:normal}
@media(max-width:1050px){
 .ef-canonical-holder .ef-memory-individual-controls{grid-template-areas:'context context' 'actions cardactions';grid-template-columns:minmax(0,1fr) max-content}
}
@media(max-width:560px){
 .ef-canonical-holder .ef-memory-individual-controls{grid-template-areas:'context' 'actions' 'cardactions';grid-template-columns:minmax(0,1fr)}
 .ef-canonical-holder .ef-memory-individual-controls .pin-unified-card-actions{justify-self:start}
}