:root{--ink:#09151b;--paper:#fff1d2;--gold:#ffdf27;--red:#ff5349}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font:17px/1.45 system-ui,sans-serif}main{max-width:850px;margin:auto;padding:clamp(14px,4vw,40px)}h1,h2{font-family:Georgia,serif;line-height:1.06}h1{font-size:clamp(32px,6vw,54px)}a{color:inherit}button,.btn{display:inline-block;font:inherit;font-weight:750;color:#0c151a;background:var(--gold);border:1px solid #191c1f;border-radius:7px;padding:.65em 1em;text-decoration:none;cursor:pointer}nav{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:16px 0}img{display:block;max-width:100%;height:auto}.brand{font:700 24px Georgia}.brand b{color:var(--red)}.sheet{border:6px solid var(--paper);width:100%}.book{display:inline-grid;width:min(210px,100%);margin:12px 15px 12px 0;gap:8px;vertical-align:top}.book img{height:200px;object-fit:cover;object-position:top;width:100%}label{display:grid;gap:5px;margin:16px 0}input,textarea{padding:10px;font:inherit;max-width:100%}output{display:block;margin:14px 0}button:disabled{opacity:.55}button:focus-visible,a:focus-visible{outline:3px solid #39caff;outline-offset:3px}.cover{position:relative;background:var(--paper);color:var(--ink);padding:8px;border-radius:8px}.hero{width:100%;height:clamp(135px,30vw,265px);object-fit:cover;object-position:50% 20%}.label,.page{position:absolute;top:14px;padding:5px 9px;color:#101418;font-weight:850}.label{left:14px;background:var(--red)}.page{right:14px;background:var(--gold);transform:rotate(3deg)}.body{padding:0 12px}.body h2{margin:14px 0 5px}.body nav{margin:8px 0}.cardframe{padding:8px;max-width:none}
.studio{max-width:1460px}.studio header{border-bottom:2px solid #efa838;margin-bottom:22px}.studio h1{margin:.25em 0}.studio small{color:#e8c777;font-weight:700;letter-spacing:.13em}.columns{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(330px,1.45fr);gap:24px;align-items:start}.studio fieldset,.proof{border:1px solid #435359;border-radius:12px;padding:20px;background:#101f26;min-width:0}.studio input,.studio textarea,.studio select{font:inherit;border:1px solid #627079;border-radius:5px;padding:8px;width:100%;background:#07171e;color:#fff}.studio textarea{min-height:65px}.studio form h2{font-size:22px;color:#ffdf49}.proof{position:sticky;top:10px}.proof nav label{margin:0}.proof nav{gap:12px}.proof #screen{max-width:100%;margin:auto;background:#09151b;padding:8px;container-type:inline-size;overflow-wrap:anywhere}.hero{height:clamp(135px,30cqw,265px)}.cardframe{container-type:inline-size}.studio output{color:#ffe790}.proof #screen h1{font-size:clamp(32px,6cqw,54px)}#finish,#settings{background:#dccdac}.proof .cover p{white-space:pre-wrap}.proof #context{color:#bac9cf}@media(max-width:800px){.columns{grid-template-columns:1fr}.proof{position:static}}

/* MGR BD - couverture relief v1 */
:is(.cardframe,.proof #screen){padding:12px 13px 18px;background:#10182b}
:is(.cardframe,.proof #screen) .cover{
  position:relative;display:block;padding:8px;border:1px solid #fff2ce;border-radius:12px;
  color:#281b14;background:linear-gradient(120deg,#fff6e4 0%,#ffebc7 85%,#f4dcb4);
  box-shadow:0 2px 0 #9a714b,1px 4px 0 #fff3d7,2px 6px 0 #b89168,3px 8px 0 #ead0a6,4px 11px 18px #020716a6;
}
:is(.cardframe,.proof #screen) .cover > div:first-child{
  padding:5px 6px 10px!important;color:#442d26;
}
:is(.cardframe,.proof #screen) .cover > a:first-of-type{
  display:block;overflow:hidden;border:1px solid #49372b;border-radius:5px;
  box-shadow:0 2px 4px #51331f44;
}
:is(.cardframe,.proof #screen) .cover .hero{display:block;width:100%;height:clamp(135px,30cqw,265px);object-fit:cover}
:is(.cardframe,.proof #screen) .cover .body{padding:0 clamp(8px,2cqw,16px) 2px}
:is(.cardframe,.proof #screen) .cover .body h2{color:#251b1c;text-shadow:0 1px #fff;margin:9px 0 6px}
:is(.cardframe,.proof #screen) .cover .body .btn{
 color:#251b12;background:linear-gradient(#fff17b,#ffce32);border:1px solid #795719;
 border-radius:8px;box-shadow:0 3px 0 #93641c,0 5px 8px #72451336;min-height:44px;
}
:is(.cardframe,.proof #screen) .cover .body .btn:active{transform:translateY(2px);box-shadow:0 1px 0 #93641c}
:is(.cardframe,.proof #screen) .cover a:focus-visible{outline:3px solid #005e82;outline-offset:3px}

/* MGR BD - couverture pelliculée */
:is(.cardframe,.proof #screen) .cover {
 isolation:isolate; overflow:hidden;
 background:linear-gradient(90deg,#8d6845 0,#f6dfaf 2px,#a7825a 4px,#f7deb2 7px,#cda97a 10px,#ffe8be 14px,transparent 20px),
 linear-gradient(119deg,#eed3a3 2%,#fff4da 25%,#f6dfb5 46%,#fff2d5 74%,#efd1a0);
 border-color:#e8d1aa;padding-left:19px;
 box-shadow:inset 0 1px 0 #fffaf0,0 2px 0 #976e42,1px 4px 0 #f3e2c7,2px 6px 0 #b78c61,3px 8px 0 #eed7b3,4px 12px 18px #03071599;
}
:is(.cardframe,.proof #screen) .cover::after {
 content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
 background:linear-gradient(117deg,transparent 15%,rgba(255,255,255,.13) 25%,rgba(255,255,255,.33) 31%,rgba(255,255,255,.07) 33%,transparent 43%,transparent 74%,rgba(255,255,255,.14) 83%,transparent 88%);
 box-shadow:inset 0 1px 1px #fff9,inset -2px 0 3px #896b4326;
}
:is(.cardframe,.proof #screen) .cover .body,:is(.cardframe,.proof #screen) .cover > div:first-child {position:relative;z-index:2}

/* MGR BD lecture integrale v1 */
.hero,:is(.cardframe,.proof #screen) .cover .hero {
 display:block;width:100%;height:auto!important;max-height:none!important;
 aspect-ratio:auto!important;object-fit:contain!important;
}
.book img{height:auto;object-fit:contain}
.sheet{height:auto;max-height:none;object-fit:contain}
:is(.cardframe,.proof #screen) .cover::after{display:none}

/* MGR JOURNAL V1 */
:is(.cardframe,.proof #screen) .cover {
 background:#faf7ef!important;color:#25221f!important;
 border:1px solid #d4cbbb!important;border-radius:2px!important;
 padding:16px!important;box-shadow:0 5px 16px #0003!important;
}
:is(.cardframe,.proof #screen) .cover::after{display:none!important}
:is(.cardframe,.proof #screen) .cover::before {
 content:"LE JOURNAL DE LA MAGICAL";display:block;
 font-family:Georgia,'Times New Roman',serif;font-size:clamp(23px,5.4cqw,38px);
 font-weight:900;line-height:1.12;text-align:center;letter-spacing:-.035em;
 color:#22201e;border-top:4px solid #25221f;border-bottom:1px solid #25221f;
 padding:13px 0 12px;margin-bottom:8px;
}
:is(.cardframe,.proof #screen) .cover > div:first-child {
 border-bottom:3px double #51493e;padding:3px 0 10px!important;
 margin-bottom:14px;color:#51493e!important;font-size:11px!important;
 letter-spacing:.08em!important;
}
:is(.cardframe,.proof #screen) .cover > a:first-of-type {
 border:1px solid #b9ae9e;border-radius:0!important;box-shadow:none!important;
}
:is(.cardframe,.proof #screen) .cover .hero {
 width:100%;height:auto!important;max-height:none!important;
 object-fit:contain!important;aspect-ratio:auto!important;
}
:is(.cardframe,.proof #screen) .cover .body {
 padding:0 2px!important;font-size:16px;line-height:1.6;
}
:is(.cardframe,.proof #screen) .cover .body h2 {
 font-family:Georgia,'Times New Roman',serif;font-size:clamp(25px,4.5cqw,34px);
 font-weight:700;color:#22201e!important;text-shadow:none!important;
 line-height:1.15;margin:10px 0!important;
}
:is(.cardframe,.proof #screen) .cover .body small{color:#8a2633!important}
:is(.cardframe,.proof #screen) .cover .body p{color:#484239}
:is(.cardframe,.proof #screen) .cover .body .btn {
 background:#842739!important;color:#fffaf2!important;
 border:1px solid #842739!important;border-radius:2px!important;
 box-shadow:none!important;font-size:14px;min-height:44px;
}
:is(.cardframe,.proof #screen) .cover .body .btn:hover{background:#632031!important}
:is(.cardframe,.proof #screen) .cover a:focus-visible{outline:3px solid #842739;outline-offset:3px}
:is(.cardframe,.proof #screen) .cover .body > a:last-child {
 border-top:1px solid #b9ae9e!important;margin-top:14px;color:#51493e;
}
@media(max-width:480px){
 :is(.cardframe,.proof #screen) .cover{padding:10px!important}
 :is(.cardframe,.proof #screen) .cover .body nav{gap:12px}
}

/* MGR JOURNAL PAPIER V2 DEBUT */
:is(.cardframe,.proof #screen){padding:20px 18px 32px!important}
:is(.cardframe,.proof #screen) .cover {
 position:relative;isolation:isolate;overflow:visible!important;
 padding:clamp(12px,3cqw,26px)!important;
 border:1px solid #d5c3a3!important;
 border-radius:3px 5px 8px 3px / 4px 3px 7px 5px!important;
 background-color:#f2e7d1!important;
 background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.68%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%22.12%22%2F%3E%3C%2Fsvg%3E"),
 linear-gradient(90deg,transparent 47%,#a1845420 49.5%,#fffaf099 50%,#b49a7130 50.5%,transparent 53%),
 radial-gradient(ellipse at center,#fffaf0 20%,#ede0c5 100%)!important;
 background-size:180px 180px,100% 100%,100% 100%!important;
 box-shadow:2px 4px 0 #e1d3b6,3px 5px 0 #ac9876,
 -3px 8px 0 #eaddc2,-4px 9px 0 #bba785,
 4px 12px 0 #dfd0b1,5px 13px 0 #a89475,
 0 18px 25px #0007,inset 0 0 28px #9d7f4920!important;
}
:is(.cardframe,.proof #screen) .cover::before {
 font-family:Georgia,'Times New Roman',serif;
 font-size:clamp(23px,5.1cqw,43px);font-weight:900;
 border-top:4px double #30291f;border-bottom:0;
 margin:0;padding:12px 0 4px;letter-spacing:-.045em;
}
:is(.cardframe,.proof #screen) .cover > div:first-child {
 border-bottom:4px double #40362a!important;
 padding:0 0 10px!important;margin-bottom:16px;gap:9px!important;
}
:is(.cardframe,.proof #screen) .cover > div:first-child::before {
 content:"La vie de la radio en BD";display:block;flex-basis:100%;
 text-align:center;font:italic clamp(16px,3cqw,23px)/1.3 Georgia,serif;
 text-transform:none;letter-spacing:0;color:#30291f;
 padding:0 0 12px;margin-bottom:3px;border-bottom:1px solid #7a6a52;
}
:is(.cardframe,.proof #screen) .cover > a:first-of-type {
 border-radius:0!important;border:1px solid #6d604c!important;
 box-shadow:0 2px 3px #493b2822!important;background:#fffaf2;
}
:is(.cardframe,.proof #screen) .cover .hero {
 display:block;width:100%;height:auto!important;max-height:none!important;
 object-fit:contain!important;aspect-ratio:auto!important;
}
:is(.cardframe,.proof #screen) .cover .body {
 padding:0!important;color:#30291f;
}
:is(.cardframe,.proof #screen) .cover .body h2 {
 font-size:clamp(27px,4.8cqw,39px);font-family:Georgia,serif;
}
:is(.cardframe,.proof #screen) .cover .body .btn {
 background:#82263a!important;border-color:#702133!important;
 color:#fffaf0!important;border-radius:3px!important;
 box-shadow:inset 0 1px 0 #ffffff25!important;
}
:is(.cardframe,.proof #screen) .cover .body > a:last-child {
 border-top:3px double #87775e!important;padding-top:12px!important;
}
@media(max-width:480px){
 :is(.cardframe,.proof #screen){padding:12px 10px 25px!important}
 :is(.cardframe,.proof #screen) .cover{padding:11px!important}
 :is(.cardframe,.proof #screen) .cover > div:first-child{font-size:10px!important}
}
/* MGR JOURNAL PAPIER V2 FIN */

/* MGR JOURNAL COMPACT 60 */
:is(.cardframe,.proof #screen) .cover {
 width:60%!important;max-width:100%;margin:0 auto!important;
 container-type:inline-size;
}
:is(.cardframe,.proof #screen) .cover::before {
 font-size:clamp(18px,5.1cqw,38px)!important;
 overflow-wrap:normal;
}
:is(.cardframe,.proof #screen) .cover .body {font-size:14px!important;line-height:1.45}
:is(.cardframe,.proof #screen) .cover .body h2 {font-size:clamp(22px,4.8cqw,32px)!important}
@media(max-width:600px){
 :is(.cardframe,.proof #screen) .cover{width:100%!important}
 :is(.cardframe,.proof #screen) .cover .body{font-size:16px!important}
}

/* MGR JOURNAL ALIGNEMENT COLONNE V1 */
:is(.cardframe,.proof #screen){
 padding:8px 9px 20px!important;background:transparent!important;
}
:is(.cardframe,.proof #screen) .cover{
 width:100%!important;max-width:100%!important;margin:0!important;
 padding:clamp(10px,2cqw,16px)!important;box-sizing:border-box;
}
:is(.cardframe,.proof #screen) .cover::before{
 font-size:clamp(20px,5cqw,34px)!important;
 padding:7px 0 4px!important;line-height:1.08!important;
}
:is(.cardframe,.proof #screen) .cover > div:first-child{
 margin-bottom:9px!important;padding-bottom:7px!important;gap:6px!important;
}
:is(.cardframe,.proof #screen) .cover > div:first-child::before{
 font-size:clamp(14px,2.8cqw,19px)!important;
 padding-bottom:7px!important;margin-bottom:0!important;
}
:is(.cardframe,.proof #screen) .cover .body{
 font-size:15px!important;line-height:1.4!important;
}
:is(.cardframe,.proof #screen) .cover .body h2{
 font-size:clamp(23px,4.5cqw,30px)!important;margin:7px 0!important;
}
:is(.cardframe,.proof #screen) .cover .body p{margin:8px 0!important}
:is(.cardframe,.proof #screen) .cover .body nav{margin:10px 0!important;gap:10px!important}
:is(.cardframe,.proof #screen) .cover .hero{
 width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;
}