/* 
minadg-ds-simple
css pour toutes les appli simple (centrés)
Échelle recalibrée à ~90% (espacements, tailles) pour correspondre à minadg-design-system.css
*/

/* layout : colonne unique centrée sur la page */
/*body{display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:24px!important}*/
/* v2 body{display:flex;overflow-y:auto;padding:24px!important}*/
/* v3 body{display:flex;flex-direction:column;overflow-y:auto;padding:24px!important;box-sizing:border-box}*/
/* v4 body{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:24px!important;box-sizing:border-box} — padding déplacé sur .app-simple pour laisser le topbar en pleine largeur */
body{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:0;margin:0;box-sizing:border-box}

/* le topbar (partagé, voir minadg-design-system.css) prend toute la largeur, au-dessus du contenu */
#topbar{width:100%;flex:none}

/* largeur du contenu : reste confortable sur mobile, s'élargit sur grand écran sans devenir démesuré (dézoomé légèrement) */
.app-simple{display:flex;flex-direction:column;align-items:center;width:100%;max-width:clamp(460px, 52vw, 760px);margin:0 auto;padding:22px;box-sizing:border-box;gap:14px}

/* actions : juste sous le head */
/*.actions{display:flex;gap:8px;justify-content:center;width:100%}*/
.actions{display:flex;flex-wrap:nowrap;gap:4px;justify-content:stretch;width:100%}
.actions button{display:flex;flex:1 1 0;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;white-space:normal;word-break:normal;height:auto;min-height:52px;padding:5px 4px}
.actions button span{display:block;max-width:100%;overflow-wrap:break-word}
/*.actions svg{width:18px;height:18px;flex:none}*/


/* carte contenu générique */
.card{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(16px, 3.6vw, 25px)}

/* plateau + réserve, à l'intérieur de .card (déjà défini dans ds-simple.css) */
#board-wrap{width:100%;max-width:378px;margin:0 auto;position:relative;aspect-ratio:3/4}
#board{position:relative;width:100%;height:100%;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:radial-gradient(var(--line) 1px,transparent 1.4px) 0 0/calc(100% / 3) 25%,var(--paper);touch-action:none}
.reserve-panel{width:100%;max-width:378px;margin:13px auto 0}
.reserve-label{margin:0 0 7px;color:var(--muted);text-align:center;font-size:clamp(10px, 1.6vw, 12px);text-transform:uppercase;letter-spacing:.08em}
#tray{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:9px;border:1px dashed var(--line);border-radius:var(--r-md);touch-action:none}

/* tuiles */
.tile{cursor:grab;user-select:none;touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tile:active{cursor:grabbing}
.tile.dragging{position:fixed!important;z-index:9999!important;margin:0;cursor:grabbing;pointer-events:none}
.tile.in-tray{position:relative;width:clamp(25px, 7.2vw, 34px);height:clamp(25px, 7.2vw, 34px);flex:0 0 auto}
.tile.on-board{position:absolute;width:33.333333%;height:25%;padding:0;transition:transform var(--dur) var(--ease)}
.tile.on-board.dragging{transition:none}
.tile-inner{width:100%;height:100%;overflow:hidden;background:var(--ink);border-radius:var(--r-xs);box-shadow:var(--shadow-sm)}
.tile-inner img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.tile.in-tray .tile-inner{border-radius:var(--r-xs);box-shadow:var(--shadow-xs)}
.tile.on-board .tile-inner{border-radius:0;box-shadow:none}
.tile.selected .tile-inner{outline:3px solid var(--paper);outline-offset:-4px}
.tile.in-tray.selected .tile-inner{outline:2px solid var(--ink);outline-offset:-2px}
.tile:focus-visible .tile-inner{outline:3px solid var(--ink);outline-offset:3px}

/* footer */
footer.foot-note{max-width:none;width:100%;text-align:justify;color:var(--muted);font-size:clamp(11px, 1.8vw, 13px)}