@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap');
:root{font-family:Nunito,"Trebuchet MS",sans-serif;color:#345748;background:#fff9e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 10% 10%,#fff3c8,transparent 30%),linear-gradient(145deg,#fff9e9,#edf8df)}button,input{font:inherit}.app{width:min(1180px,100%);margin:auto;padding:18px 26px 10px;min-height:100vh;display:flex;flex-direction:column}.top{display:grid;grid-template-columns:50px 1fr 50px;align-items:center;margin-bottom:18px}.back,.icon-button{display:grid;place-items:center;width:43px;height:43px;border:0;border-radius:15px;background:white;box-shadow:0 3px 0 #e6dfbf;text-decoration:none;color:#52745b;font-size:23px;cursor:pointer}.title{display:flex;align-items:center;justify-content:center;gap:12px}.title>span{font-size:38px}.title h1{font-size:clamp(21px,3vw,30px);margin:0;color:#ec805b;line-height:1.1}.title p{margin:2px 0 0;text-align:center;color:#8c9b7a;font-weight:800;font-size:13px}.icon-button{justify-self:end;font-size:19px}.workspace{display:grid;grid-template-columns:245px minmax(0,1fr);gap:18px;flex:1;min-height:0}.palette-panel{background:#fff;border-radius:25px;padding:20px 17px;box-shadow:0 6px 0 #e6ebd7;align-self:start}.palette-panel h2{margin:0 0 14px;font-size:19px;color:#526e59}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.swatch{width:43px;height:43px;border:3px solid white;border-radius:50%;cursor:pointer;box-shadow:0 2px 5px #34574826;transition:transform .14s,outline .14s}.swatch:hover{transform:scale(1.12)}.swatch.selected{outline:3px solid #405f4d;transform:scale(1.08)}.selected-color{display:flex;align-items:center;gap:8px;margin:14px 0 16px;font-size:13px;font-weight:900;color:#718370}.selected-color span:first-child{width:17px;height:17px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #bbb}.tools{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-top:12px;border-top:1px dashed #e5e7d9}.tool{border:2px solid #edf0e5;background:#fff;border-radius:14px;padding:8px 5px 6px;color:#779080;cursor:pointer}.tool.active{border-color:#f1b953;background:#fff9e8;color:#46674d}.tool>span{display:block;font-size:23px}.tool small{font-size:12px;font-weight:900}.size-control{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;margin:13px 0;color:#748876;font-size:12px;font-weight:800}.size-control input{grid-column:1/2;accent-color:#ee8b65;width:100%}.size-control span:last-child{grid-column:2;grid-row:1/3;font-weight:900}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.action{border:0;border-radius:12px;background:#f4f7ed;padding:10px 5px;color:#5e7867;font-weight:800;cursor:pointer;font-size:13px}.action:disabled{opacity:.45;cursor:default}.save{grid-column:1/-1;margin-top:5px;border:0;border-radius:15px;padding:13px 7px;background:#ed8863;color:white;font-size:14px;font-weight:900;box-shadow:0 4px 0 #c96b50;cursor:pointer}.save:hover{transform:translateY(-2px)}.canvas-area{min-height:0;display:flex;flex-direction:column}.canvas-top{display:flex;justify-content:space-between;align-items:center;padding:0 6px 9px;color:#63806b;font-weight:900;font-size:14px}.canvas-top span:last-child{font-weight:700;font-size:12px;color:#9a9f82}.paper{flex:1;min-height:320px;display:grid;place-items:center;padding:12px;border:8px solid white;border-radius:25px;background:#fffdf6;box-shadow:0 6px 0 #e2e7d2;overflow:hidden}canvas{display:block;max-width:100%;max-height:calc(100vh - 230px);width:auto;height:auto;object-fit:contain;touch-action:none;cursor:crosshair}.tip{text-align:center;padding:10px;color:#90a184;font-size:12px;font-weight:800}footer{text-align:center;padding:12px 0 0;color:#9aa688;font-size:12px;font-weight:800}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;padding:12px 20px;background:#355b48;color:#fff;border-radius:18px;font-weight:900;box-shadow:0 6px 20px #314d3a40;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:740px){.app{padding:12px 13px}.top{margin-bottom:10px}.workspace{grid-template-columns:1fr;gap:12px}.palette-panel{order:2;padding:13px 14px}.palette-panel h2{display:none}.palette{grid-template-columns:repeat(6,1fr);gap:6px;justify-items:center}.swatch{width:min(9vw,38px);height:min(9vw,38px)}.selected-color{display:none}.tools{border:0;padding:9px 0 0}.size-control{margin:5px 0}.actions{grid-template-columns:1fr 1fr 1.6fr;margin-top:6px}.save{grid-column:auto;margin:0}.canvas-area{order:1}.canvas-top{font-size:12px}.canvas-top span:last-child{font-size:10px}.paper{min-height:44vh;height:48vh;padding:6px;border-width:5px}canvas{max-height:calc(48vh - 24px)}.tip{padding:6px;font-size:11px}.back,.icon-button{width:38px;height:38px}.title>span{font-size:31px}}
.families{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 13px}.family{min-width:0;border:2px solid #edf0e5;border-radius:12px;background:#fff;padding:6px 3px;color:#718370;cursor:pointer}.family span{display:block;font-size:19px;line-height:1.1}.family small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:900}.family.active{border-color:#edb94e;background:#fff7df;color:#496550;box-shadow:0 2px 0 #f3e1ae}.palette{max-height:180px;overflow-y:auto;padding:2px 3px 6px;scrollbar-color:#d7e5c9 transparent;scrollbar-width:thin}
@media(max-width:740px){.families{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:9px}.family{padding:5px 3px}.family span{font-size:18px}.family small{font-size:10px}.palette{max-height:120px;grid-template-columns:repeat(6,1fr);gap:6px}}
.page-picker{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:0 3px}.gallery-trigger{border:0;border-radius:14px;background:#fff;padding:10px 15px;color:#526e59;font-weight:900;box-shadow:0 3px 0 #e5e8d6;cursor:pointer}.gallery-trigger:hover{transform:translateY(-1px)}#current-page-name{color:#82917b;font-size:13px;font-weight:800}.gallery-overlay[hidden]{display:none}.gallery-overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#253c32a8;backdrop-filter:blur(4px)}.gallery-dialog{width:min(900px,100%);max-height:min(88vh,900px);overflow:auto;border:7px solid #fff;border-radius:28px;background:#fff9e9;padding:20px;box-shadow:0 12px 40px #1b302d55}.gallery-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.gallery-heading h2{margin:0;color:#e77d5c;font-size:clamp(20px,3vw,28px)}.gallery-heading p{margin:3px 0 0;color:#8b9a7d;font-weight:800}.gallery-close{width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#57715d;font-size:20px;font-weight:900;cursor:pointer}.page-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.page-card{min-width:0;overflow:hidden;border:3px solid #fff;border-radius:16px;background:#fff;box-shadow:0 3px 0 #e3e8d7;color:#4c6854;cursor:pointer;text-align:center;transition:transform .15s,border-color .15s}.page-card:hover,.page-card:focus-visible{transform:translateY(-3px);border-color:#efc45e;outline:0}.page-card.selected{border-color:#ed8b63}.page-card img{display:block;width:100%;height:145px;object-fit:contain;background:#fff}.page-card span{display:block;min-height:35px;padding:5px 4px;font-size:11px;font-weight:900}.page-picker{min-height:40px}
@media(max-width:740px){.page-picker{margin-bottom:9px}.gallery-trigger{padding:9px 11px;font-size:13px}#current-page-name{font-size:11px}.gallery-overlay{padding:8px}.gallery-dialog{padding:12px;border-width:4px;border-radius:20px}.page-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.page-card img{height:112px}.page-card span{font-size:10px;min-height:32px}}

/* Mise en page compacte sur ordinateur : tout tient dans l'écran sans défiler */
@media(min-width:741px){.app{padding:12px 26px 6px}.top{margin-bottom:8px}.page-picker{margin:0 0 8px;min-height:0}.gallery-trigger{padding:8px 14px}.palette-panel{padding:14px 15px}.palette-panel h2{display:none}.families{gap:5px;margin-bottom:10px}.family{padding:4px 3px}.family span{font-size:17px}.palette{grid-template-columns:repeat(5,1fr);gap:7px;max-height:none;overflow:visible}.swatch{width:38px;height:38px}.selected-color{margin:10px 0}.tools{padding-top:9px}.tool{padding:5px 5px 4px}.tool>span{font-size:20px}.size-control{margin:8px 0}.actions{margin-top:6px}.action{padding:8px 5px}.save{padding:11px 7px}.canvas-top{padding-bottom:6px}.paper{min-height:0;padding:8px}canvas{max-height:calc(100vh - 200px)}.tip{padding:6px}footer{display:none}}

.title svg.tete{width:44px;height:46px;flex:none}@media(max-width:740px){.title svg.tete{width:36px;height:38px}}