*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#e9e5df;color:#40180f;font-family:Montserrat,Arial,sans-serif}
.app{display:flex;justify-content:center;align-items:flex-start;gap:24px;padding:24px}.preview-wrap{width:min(768px,calc(100vw - 340px));min-width:360px;perspective:2200px}
.flip-shell{width:100%;aspect-ratio:2/3;perspective:2200px}.flip-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.75,.25,1)}
.flip-shell.flipped .flip-inner{transform:rotateY(180deg)}.face{position:absolute!important;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.back{transform:rotateY(180deg)}
.card{container-type:inline-size;position:relative;width:100%;height:100%;background:#fffaf4;overflow:hidden;box-shadow:0 18px 55px #0002;user-select:none}
.item{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);font-size:calc(var(--fs)*1cqw);line-height:1.08;z-index:2}.center{text-align:center}.serif{font-family:"Cormorant Garamond",Georgia,serif}.script{font-family:"Great Vibes","Cormorant Garamond",cursive}.sans{font-family:Montserrat,Arial,sans-serif}.bold{font-weight:700}.orange{color:#e3450d}.gold{color:#c89630}.rust{color:#963018}.cream{color:#fff1d8}.white{color:#fff}.mini{font-size:.45em}.monogram{line-height:.55;text-align:center}.leftWords{text-align:center;line-height:1.55;letter-spacing:.16em}.leftQuote{text-align:center}.routeText{line-height:1.28}.item[style*="--ls"]{letter-spacing:calc(var(--ls)*1cqw)}
.flip-hint{position:absolute;right:5%;bottom:2.2%;font-size:calc(1.05cqw);letter-spacing:.08em;color:#7f2b16;background:#fff8e8d9;border:1px solid #d4a14a;border-radius:999px;padding:1.1% 2%;z-index:6}
.program-overlay{position:absolute;left:29%;right:5%;top:5%;bottom:5%;display:flex;flex-direction:column;align-items:center;text-align:center}.program-kicker{font:600 calc(1.25cqw)/1 Montserrat;letter-spacing:.35em;margin-top:2%}.program-title{font:400 calc(7cqw)/1 "Great Vibes";color:#df430c;margin-top:2%}.program-sub{font:500 calc(2.5cqw)/1 "Cormorant Garamond";letter-spacing:.08em}.program-heart{font-size:calc(3.2cqw);color:#c48c25;margin:1% 0 2%}
.program-list{width:82%;display:flex;flex-direction:column;gap:1.1cqw}.program-row{display:grid;grid-template-columns:18% 12% 1fr;align-items:center;min-height:6.1cqw;background:#fffaf0df;border:1px solid #d6a14a;border-radius:1.5cqw;padding:1.2cqw 1.5cqw;text-align:left;box-shadow:0 .4cqw 1.2cqw #6d26090c}.program-time{font:700 calc(1.65cqw)/1 Montserrat;color:#9a3219}.program-icon{font-size:calc(2.4cqw);text-align:center;color:#b57c18}.program-name{font:600 calc(1.45cqw)/1.2 "Cormorant Garamond";color:#5b2418}.program-note{display:block;font:400 calc(.95cqw)/1.3 Montserrat;color:#745e55;margin-top:.3cqw}.remove-program{position:absolute;right:1.2cqw;border:0;background:transparent;color:#9a3219;font-size:calc(1.4cqw);cursor:pointer}.program-footer{margin-top:auto;font:400 calc(2.45cqw)/1 "Great Vibes";color:#672719}.back-hint{right:auto;left:36%}
.editing [contenteditable=true]{outline:1px dashed #d19a34;outline-offset:2px;background:#fff8db55}.moving .item{cursor:grab}.item.selected{outline:2px solid #2b79d0!important;outline-offset:3px}
.panel{width:280px;background:#fff;padding:18px;border-radius:14px;box-shadow:0 10px 32px #0001;position:sticky;top:24px}.panel h2{margin:0 0 10px;font-size:18px}.panel p{font-size:12px;line-height:1.5;color:#666}.panel button{width:100%;margin:4px 0;border:0;border-radius:8px;padding:10px;background:#8d3217;color:#fff;cursor:pointer}.panel .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.status{padding:8px;border-radius:7px;background:#f5f2ed}
@media(max-width:900px){.app{display:block;padding:10px}.preview-wrap{width:min(768px,100%);min-width:0;margin:auto}.panel{position:static;width:min(768px,100%);margin:14px auto}}
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{margin:0!important;padding:0!important;width:210mm!important;height:297mm!important;background:#fff!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .local-notice,.panel,.flip-hint{display:none!important}
  .app{display:block!important;padding:0!important;margin:0!important;width:210mm!important;height:297mm!important}
  .preview-wrap,.flip-shell,.flip-inner{width:210mm!important;height:297mm!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;perspective:none!important}
  .flip-inner{transform:none!important}
  .face{position:absolute!important;inset:0!important;width:210mm!important;height:297mm!important;box-shadow:none!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .front{display:block!important;visibility:visible!important;transform:none!important;background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important}
  .back{display:none!important}
  body.print-back .front{display:none!important}
  body.print-back .back{display:block!important;visibility:visible!important;transform:none!important}
}
/* ===== V5: VERSO 100% CSS — aucune image de fond ===== */
.back{
  background-image:none!important;
  background:
    radial-gradient(circle at 18% 10%,rgba(229,69,13,.09),transparent 24%),
    radial-gradient(circle at 88% 88%,rgba(196,140,37,.10),transparent 26%),
    linear-gradient(145deg,#fffdf8 0%,#fff9ef 50%,#fffdf9 100%)!important;
  border:clamp(2px,.35cqw,4px) solid #c8942f;
}
.back::before{
  content:"";
  position:absolute;inset:1.2%;
  border:1px solid rgba(190,126,24,.55);
  border-radius:2.4cqw;
  pointer-events:none;
}
.back::after{
  content:"V  &  G";
  position:absolute;
  left:31%;right:7%;top:44%;
  text-align:center;
  font:500 12cqw/1 "Cormorant Garamond",serif;
  letter-spacing:.08em;
  color:rgba(178,111,20,.035);
  transform:rotate(-9deg);
  pointer-events:none;
}
.css-decor{position:absolute;pointer-events:none;z-index:0}
.decor-a{
  width:29cqw;height:29cqw;left:-11cqw;top:-10cqw;border-radius:50%;
  border:5cqw solid rgba(191,60,14,.92);
  box-shadow:0 0 0 .8cqw #d4a447 inset,0 0 0 1.2cqw rgba(255,255,255,.6) inset;
}
.decor-b{
  width:36cqw;height:36cqw;right:-21cqw;bottom:-20cqw;border-radius:50%;
  border:6cqw solid rgba(151,45,18,.94);
  box-shadow:0 0 0 .8cqw #d4a447 inset;
}
.decor-c{
  left:4%;top:3%;bottom:3%;width:.28cqw;
  background:linear-gradient(transparent,#c89535 12%,#c89535 88%,transparent);
}
.css-flower{position:absolute;color:#c89535;opacity:.55;font-size:5cqw;z-index:0}
.flower-a{right:7%;top:5%;transform:rotate(22deg)}
.flower-b{left:7%;bottom:7%;transform:rotate(-18deg)}
.program-overlay{z-index:2}
.program-kicker{color:#7f2a18}
.program-title{
  color:#df430c;
  text-shadow:0 .15cqw .4cqw rgba(123,43,16,.08);
}
.program-sub{color:#6a2b1b}
.program-heart{position:relative}
.program-heart::before,.program-heart::after{
  content:"";position:absolute;top:50%;width:13cqw;height:.12cqw;
  background:linear-gradient(90deg,transparent,#c89535);
}
.program-heart::before{right:140%}
.program-heart::after{left:140%;transform:scaleX(-1)}
.program-row{
  position:relative;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(201,143,47,.62);
  border-left:.55cqw solid #b53e18;
  box-shadow:0 .35cqw 1.1cqw rgba(101,44,18,.055);
  backdrop-filter:none;
}
.program-row:nth-child(even){border-left-color:#c89535}
.program-time{
  background:#8f2f18;color:#fff;border-radius:999px;
  padding:.75cqw .6cqw;text-align:center;font-size:1.35cqw;
}
.program-icon{
  width:3.2cqw;height:3.2cqw;border:1px solid #d0a04b;border-radius:50%;
  display:grid;place-items:center;background:#fff8e9;
}
.program-name{color:#5c2418}
.program-note{color:#80695e}
.program-footer{
  padding:1.3cqw 4cqw;border-top:1px solid rgba(200,146,55,.5);
  color:#6c2819;
}
.back-hint{background:#8f2f18;color:#fff;border-color:#c89535}

/* ===== V6: programme enrichi, QR et export ===== */
.program-list{gap:1.45cqw}
.program-row{min-height:7.1cqw;padding:1.35cqw 1.5cqw}
.program-time{font-size:1.45cqw}.program-icon{font-size:2.15cqw}
.program-name{font-size:1.55cqw}.program-note{font-size:1.02cqw}
.program-bottom{margin-top:auto;width:82%;display:flex;flex-direction:column;align-items:center;gap:1.4cqw}
.qr-card{width:100%;display:grid;grid-template-columns:9.5cqw 1fr;align-items:center;gap:1.6cqw;text-align:left;background:rgba(255,255,255,.72);border:1px solid rgba(201,143,47,.62);border-radius:1.4cqw;padding:1.15cqw 1.5cqw}
.qr-code{width:8cqw;height:8cqw;display:grid;grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr);background:#fff;border:.45cqw solid #fff;box-shadow:0 0 0 1px #c89535}
.qr-pixel{background:#702512}.qr-copy{display:flex;flex-direction:column;gap:.35cqw}.qr-copy b{font:700 1.4cqw Montserrat;color:#8e3018}.qr-copy span{font:600 1.15cqw Montserrat;letter-spacing:.08em}.qr-copy small{font:400 .9cqw Montserrat;color:#79665d}
.program-footer{margin:0;width:100%}
.control-label,.export-title{display:block;margin-top:9px;font-size:11px;font-weight:700;color:#5d2b1c}.panel select,.panel input{width:100%;padding:9px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:11px}.export-title{padding-top:9px;border-top:1px solid #eee}
.exporting .flip-hint{display:none!important}

/* ===== V7 : panneau simplifié et contextuel ===== */
.panel{padding:0;overflow:visible}.panel-head{padding:18px 18px 8px}.panel-head h2{margin:0 0 6px}.panel-head p{margin:0}
.panel>button,.panel>#frontControls,.panel>#backControls,.panel>.download,.panel>.quiet,.panel>.status{margin-left:14px;margin-right:14px;width:calc(100% - 28px)}
.panel button{transition:transform .15s ease,background .15s ease}.panel button:hover{transform:translateY(-1px)}
.panel .primary{background:#6f2415;font-weight:700;margin-top:8px}
#frontControls,#backControls{padding:7px 0}#frontControls button,#backControls button{width:100%;margin:4px 0}
.program-add{display:grid;grid-template-columns:1fr;gap:4px}.qr-control{display:grid;grid-template-columns:1fr 38px;gap:5px}.qr-control button{margin:0!important}
.download{position:relative;margin-top:10px!important}.download-main{width:100%!important;background:#9a3418!important;font-weight:700!important}
.download-main span{float:right}.download-menu{position:absolute;left:0;right:0;top:100%;z-index:100;background:#fff;border:1px solid #e1d7cf;border-radius:10px;padding:6px;box-shadow:0 12px 28px #3f1a1026}
.download-menu button{width:100%;margin:2px 0;background:#fff;color:#642515;border:1px solid #eaded6}.quiet{background:#f1ece8!important;color:#6c3a2c!important}.status{margin-bottom:14px!important}
#backControls[hidden],#frontControls[hidden],.download-menu[hidden]{display:none!important}

.local-notice{max-width:1080px;margin:12px auto 0;padding:10px 14px;border:1px solid #d5a14a;border-radius:10px;background:#fff8e8;color:#6e2b19;font:12px/1.45 Montserrat,Arial,sans-serif}

/* V12: backgrounds are real DOM layers so Edge prints/captures them as content */
.card{background:none!important;overflow:hidden}
.printable-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.front-bg{object-fit:fill}
.back{background:none!important}
.back-bg{display:block!important}
.front>.item,.front>.flip-hint{z-index:2}
.back>.css-decor,.back>.css-flower,.back>.program-overlay,.back>.flip-hint{z-index:2}
@media print{
  .printable-bg{display:block!important;visibility:visible!important}
  .front-bg{object-fit:fill!important}
  .back-bg{display:block!important}
}


/* ===== V13: export recto + verso ===== */

/* PNG verso: html2canvas ne doit plus essayer de rasteriser les gradients CSS.
   Le fond principal est déjà fourni par .back-bg (SVG réel). */
.back.png-safe,
.back.png-safe *{
  background-image:none!important;
}
.back.png-safe .decor-c{display:none!important}
.back.png-safe .program-row,
.back.png-safe .qr-card{background:#fffaf2!important}
.back.png-safe::before{background:none!important}

/* PDF : toujours deux pages, recto puis verso, indépendamment du côté visible. */
@media print{
  @page{size:A4 portrait;margin:0}

  html,body{
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:#fff!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }

  .local-notice,.panel,.flip-hint,.remove-program{display:none!important}

  .app,.preview-wrap,.flip-shell,.flip-inner{
    display:block!important;
    width:210mm!important;
    height:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    perspective:none!important;
    overflow:visible!important;
  }

  .flip-inner{position:static!important}

  .face,
  .front,
  .back,
  body.print-back .front,
  body.print-back .back{
    display:block!important;
    visibility:visible!important;
    position:relative!important;
    inset:auto!important;
    width:210mm!important;
    height:297mm!important;
    min-height:297mm!important;
    max-height:297mm!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    backface-visibility:visible!important;
    -webkit-backface-visibility:visible!important;
    box-shadow:none!important;
    overflow:hidden!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }

  .front{
    break-after:page!important;
    page-break-after:always!important;
  }

  .back{
    break-after:auto!important;
    page-break-after:auto!important;
  }

  .printable-bg{
    display:block!important;
    visibility:visible!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
}


/* ===== V14 — programme plus large et mieux réparti ===== */
/* Le programme utilise davantage la largeur utile du verso. */
.back .program-overlay{
  width:78%!important;
  max-width:none!important;
  left:11%!important;
  right:auto!important;
}

.back .program-list{
  width:100%!important;
  max-width:none!important;
}

.back .program-row{
  width:100%!important;
  box-sizing:border-box!important;
  padding-left:2.2%!important;
  padding-right:2.2%!important;
}

.back .program-row .program-main{
  flex:1 1 auto!important;
  min-width:0!important;
}

.back .program-row .program-title,
.back .program-row .program-desc{
  max-width:none!important;
}

/* QR/pass aligné sur la même largeur visuelle que le programme. */
.back .qr-card{
  width:78%!important;
  max-width:none!important;
  left:11%!important;
  right:auto!important;
  box-sizing:border-box!important;
}

@media (max-width:700px){
  .back .program-overlay,
  .back .qr-card{
    width:82%!important;
    left:9%!important;
  }
}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* V4.2 — typography groups */
.guestNameItem{font-weight:500;text-shadow:0 .08em .18em rgba(70,35,20,.07)}
.coupleNameItem{text-rendering:optimizeLegibility}