/* La découverte se déroule sur une même table : aucun changement de fiche à la lecture. */
dialog.discovery.material-discovery{
 width:min(1080px,calc(100vw - 28px));max-width:none;max-height:calc(100dvh - 28px);
 border:0;border-radius:3px;padding:0;background:linear-gradient(115deg,#ffedcf10,#d6a45b12),#eee6d9 url('assets/decouverte-papier-lumiere-20261027.webp') center/cover no-repeat;
 box-shadow:0 35px 100px #07150e6b;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;
}
.material-discovery::backdrop{background:#211c17eb;backdrop-filter:blur(9px)}
/* The same photographed paper and soft light serve cards and invitations. */
.material-discovery>.close{position:absolute;right:18px;top:18px;z-index:30;width:36px;height:36px;border:1px solid #85745166;background:#fbf5e7d9;color:#3c4935;font-size:22px;backdrop-filter:blur(5px)}
.scene-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}
.discovery-world{min-height:var(--closing-world-height,0px);padding:23px 0 10px;position:relative;isolation:isolate}
.scene-caption{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:8px 24px;width:fit-content;max-width:calc(100% - 128px);margin:0 auto 10px;padding:10px 16px 12px;border-bottom:1px solid #ad8c565c;position:relative;z-index:1;text-align:center;font:15px/1.5 var(--sans);color:#354331}
.scene-person{display:inline-flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:5px 8px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.scene-person>span{font-size:12px;letter-spacing:.05em;color:#715f40}
.scene-person>strong{font-size:18px;font-weight:600;color:#2c3e30}
@media(max-width:600px){.scene-caption{max-width:calc(100% - 106px);padding:6px 4px 10px;gap:5px 16px}.scene-person>strong{font-size:17px}.scene-person>span{font-size:12px}}
.material-discovery .envelope-stage{
 --envelope-width:min(50cqw,calc((100cqh - 70px)*.74),420px);
 --envelope-ratio:1.48;
 display:block;position:relative;isolation:isolate;container-type:size;
 height:clamp(360px,65dvh,620px);min-height:0;padding:0;overflow:visible;perspective:1500px;background:none;
}
.material-discovery .envelope-stage::before{content:none}
.material-discovery .envelope-stage.format-square{--envelope-width:min(44cqw,calc((100cqh - 70px)*.5),300px);--envelope-ratio:1}
.material-discovery .envelope-stage.format-portrait{--envelope-width:min(36cqw,calc((100cqh - 70px)*.385),245px);--envelope-ratio:.77}
.material-discovery .envelope{
 position:absolute;left:50%;top:auto;bottom:50%;width:var(--envelope-width);aspect-ratio:var(--envelope-ratio);
 background:none;box-shadow:none;transform:translate(-50%,50%) rotate(-7deg);transform-style:flat;
 isolation:isolate;perspective:1400px;
 transition:bottom .85s cubic-bezier(.22,.65,.3,1),transform .85s cubic-bezier(.22,.65,.3,1);
}
.material-discovery .env-back{
 background:linear-gradient(120deg,color-mix(in srgb,var(--env) 82%,#e0c99d),color-mix(in srgb,var(--env) 94%,#202b1b));
 border:1px solid #16291c26;box-shadow:1px 3px 2px #3c2e2224,5px 14px 20px #382d272b,12px 25px 42px #382d271f;
}
.material-discovery .env-back:after,.material-discovery .env-front:before,.material-discovery .env-flap:after{
 content:'';position:absolute;inset:0;background:url('assets/papier-grain.svg');opacity:.8;pointer-events:none;mix-blend-mode:multiply;
}
.material-discovery .env-front{
 z-index:4;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);
 background:linear-gradient(115deg,color-mix(in srgb,var(--env) 93%,#e8dec5),color-mix(in srgb,var(--env) 84%,#15271c));
 box-shadow:inset 0 -1px #0e1b1730;
}
.material-discovery .env-front:before{background:linear-gradient(150deg,#ffffff10,transparent 62%),url('assets/papier-grain.svg');clip-path:polygon(0 0,54% 54%,0 100%);opacity:1}
.material-discovery .env-front:after{
 content:'';position:absolute;inset:0;clip-path:polygon(0 100%,50% 48%,100% 100%);
 background:linear-gradient(180deg,color-mix(in srgb,var(--env) 84%,#e9d5ad),var(--env));
 filter:drop-shadow(0 -1px 1px #13271b40);box-shadow:inset 0 -1px #16251b1f;
}
.material-discovery .env-flap{
 height:64%;background:linear-gradient(160deg,color-mix(in srgb,var(--env) 84%,#e5d6b9),var(--env));
 border-top:1px solid #f5e4be33;filter:drop-shadow(0 2px 1px #182b2433);
 transition:transform .85s cubic-bezier(.3,.5,.3,1) .4s,z-index 0s .85s;
}
.material-discovery .env-address{font:italic clamp(20px,2.7cqw,28px)/1.2 var(--serif);color:var(--envelope-lettering,#f6e9c8);text-shadow:0 1px 1px #0a1c1233;bottom:14%;padding-inline:8px;overflow-wrap:anywhere}
.material-discovery .env-seal{
 width:48px;height:47px;left:calc(50% - 24px);top:calc(59% - 24px);border:0;
 border-radius:47% 53% 49% 51% / 52% 46% 54% 48%;
 color:#72511e;background:transparent url('assets/decouverte-sceau-cire-or-v1.png') center/contain no-repeat;
 box-shadow:none;filter:drop-shadow(1px 3px 2px #2c221f55);
 font:italic 13px/1 var(--serif);text-shadow:0 1px 0 #f1d89a9c;
 transform:translate(0,0) rotate(0);transition:transform .38s cubic-bezier(.2,.6,.3,1);
}
.material-discovery .env-seal:before{content:none}
.material-discovery .env-paper{
 left:6%;bottom:6%;width:88%;height:88%;z-index:2;overflow:visible;background:none;box-shadow:none;
 transform-origin:50% 50%;transform:translateY(0);perspective:1400px;
 transition:transform 1.3s cubic-bezier(.25,.65,.25,1) 1.35s;
}
.material-discovery .envelope.is-open{bottom:32px;transform:translateX(-50%) rotate(0)}
.material-discovery .envelope.is-open .env-seal{opacity:1;transform:translate(calc(var(--envelope-width)*-.5),calc(var(--envelope-width)/var(--envelope-ratio)*.41 + 12px)) rotate(-18deg)}
.material-discovery .envelope.is-open .env-paper{transform:translateY(-110%);box-shadow:none}
.material-discovery .envelope.is-open .env-flap{transform:rotateX(180deg);z-index:1}
.material-discovery .paper-turner{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(0);transition:transform 1.05s cubic-bezier(.3,.5,.25,1)}
.material-discovery .paper-face{
 position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
 border:1px solid #c1af8e57;background:var(--paper,#fff9ed);
 box-shadow:1px 1px 0 #e0d1b4,2px 3px 0 #cbbd9e,3px 6px 8px #3e31232e,9px 18px 30px #31291f26;
}
.material-discovery .paper-front{transform:rotateY(0)}
.material-discovery .paper-front>.booklet-page,.material-discovery .paper-front .booklet-cover{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.material-discovery .paper-front .miniature{width:100%;height:100%;padding:18px;aspect-ratio:auto!important;background-color:var(--paper)}
.material-discovery .paper-front .miniature:after{opacity:.8}
.material-discovery .paper-back{
 transform:rotateY(180deg);display:block;padding:0;color:var(--text-ink,#263c32);text-align:left;outline:none;
 background-image:linear-gradient(110deg,#ffffff35,transparent 60%),url('assets/papier-grain.svg');
}
.material-discovery .paper-back:before{content:none}
.material-discovery .paper-back>*{position:relative;z-index:1;min-width:0}
.material-discovery .paper-page{width:100%;height:100%;min-height:0}
.material-discovery .paper-page>.booklet-page{width:100%;height:100%;min-height:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.material-discovery .paper-back .booklet-message-scroll{overflow:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.material-discovery .env-back,.material-discovery .env-front,.material-discovery .env-address{transition:transform 1s cubic-bezier(.25,.6,.3,1),opacity .8s}
.material-discovery.is-reading .env-back,.material-discovery.is-reading .env-front,.material-discovery.is-reading .env-address{transform:none;opacity:1}
.material-discovery.is-reading .envelope.is-open .env-paper{
 z-index:9;transform:translateY(var(--read-y,-150px)) scale(var(--read-scale,1.5)) rotate(-1deg);
 transition:transform 1.05s cubic-bezier(.25,.6,.25,1);
}
.material-discovery.is-reading .paper-turner{transform:rotateY(180deg)}
.material-discovery.card-in-motion .env-paper{transition:transform 1.05s cubic-bezier(.25,.6,.25,1)}
/* Reverse the opening in distinct phases; the envelope stays still until sealed. */
dialog.material-discovery.is-closing .envelope .env-paper{
 z-index:9;transform:var(--closing-paper-transform,translateY(-110%));transition:none;
}
dialog.material-discovery.is-closing.is-aligning .envelope .env-paper{
 transform:translateY(-110%);transition:transform .65s cubic-bezier(.3,.1,.25,1);
}
dialog.material-discovery.is-closing.is-stowing .envelope .env-paper{
 z-index:2;transform:translateY(0);transition:transform .95s cubic-bezier(.4,0,.25,1);
}
dialog.material-discovery.is-closing.is-contained .envelope .env-paper{visibility:hidden;pointer-events:none}
dialog.material-discovery.is-closing.is-sealing .envelope .env-flap{
 z-index:6;transform:rotateX(0);transition:transform .65s cubic-bezier(.4,0,.25,1),z-index 0s;
}
dialog.material-discovery.is-closing.is-sealed .envelope .env-seal{
 transform:translate(0,0) rotate(0);transition:transform .4s cubic-bezier(.2,.6,.3,1);
}
.material-discovery .discovery-actions{
 min-height:max(88px,var(--closing-actions-height,0px));padding:8px 22px 16px;position:relative;z-index:10;gap:12px 20px;align-content:center;
}
.material-discovery .discovery-actions .btn{background:#fcf5e6e6;border:1px solid #ae9461;color:#34442f;backdrop-filter:blur(5px);box-shadow:0 3px 12px #59442a13}
.material-discovery .discovery-actions .fine{font-size:10px;color:#73755e}
.material-discovery .discovery-actions .text-button{font-size:11px;color:#46503b;border-color:#a28c5e}
.material-discovery .paper-pagination{width:100%;display:flex;gap:16px;align-items:center;justify-content:center;margin-bottom:3px;font-size:10px;color:#686e58}
.material-discovery .paper-pagination button{padding:8px 11px;background:#f9f2e4c9;border:1px solid #bca77d66;border-radius:999px;font-size:10px;color:#3c4f37;min-height:34px}
.material-discovery .paper-pagination button:disabled{cursor:default;opacity:.35}
.material-discovery .discovery-keepsakes{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:20px;padding:8px 28px 26px;flex-wrap:wrap;border-top:1px solid #a8926640;margin-inline:30px}
.material-discovery .keepsake{display:flex;flex-direction:column;align-items:center;gap:9px;background:#fffcf2;padding:6px 6px 9px;color:#46503a;box-shadow:1px 2px 2px #41351f26,3px 8px 14px #41351f1f;font-size:9px;line-height:1.4;max-width:128px;transform:rotate(-3deg);transition:transform .25s}
.material-discovery .keepsake:nth-child(even){transform:rotate(3deg)}
.material-discovery .keepsake:hover{transform:rotate(0) translateY(-3px)}
.material-discovery .keepsake img{width:105px;height:70px;object-fit:cover}
.material-discovery .keepsake-video,.material-discovery .keepsake-surprise{min-width:100px;min-height:98px;justify-content:center;background:#f5eddd}
.material-discovery .keepsake-play{font-size:25px;color:#a17b3d}
.material-discovery .keepsake-surprise>span:first-child{font:30px/1.2 var(--serif);color:#a17b3d}
.material-discovery .keepsake-route{font-size:10px;align-self:center}
.object-modal.keepsake-modal{width:min(860px,calc(100vw - 28px));padding:40px 20px 20px;background:#eee7d9}
.keepsake-modal img,.keepsake-modal video{display:block;width:100%;max-height:calc(100dvh - 140px);object-fit:contain}
@media(max-width:760px){
 dialog.discovery.material-discovery{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
 .discovery-world{padding-top:21px}
 .scene-caption{font-size:10px;margin-inline:48px}
 .material-discovery>.close{right:12px;top:12px;width:30px;height:30px;font-size:20px}
 .material-discovery .envelope-stage{--envelope-width:min(78cqw,calc((100cqh - 70px)*.74),350px);height:clamp(350px,62dvh,600px)}
 .material-discovery .envelope-stage.format-square{--envelope-width:min(71cqw,calc((100cqh - 70px)*.5),280px)}
 .material-discovery .envelope-stage.format-portrait{--envelope-width:min(63cqw,calc((100cqh - 70px)*.385),235px)}
 .material-discovery .paper-front .miniature{padding:13px}
 .material-discovery .env-seal{width:40px;height:40px;left:calc(50% - 20px);top:calc(59% - 20px);font-size:11px}
 .material-discovery .env-address{font-size:22px}
 .material-discovery .discovery-actions{padding:4px 14px 8px;gap:6px 10px;min-height:max(86px,var(--closing-actions-height,0px))}
 .material-discovery .discovery-actions .btn{font-size:14px;min-height:46px;max-width:100%;padding:10px 16px;line-height:1.3;white-space:normal}
 .material-discovery .discovery-actions .text-button{font-size:12px;min-height:44px;min-width:0;flex:1 1 0;padding:6px 3px;justify-content:center;line-height:1.25;white-space:normal;text-align:center}
 .material-discovery .discovery-actions:has(>.text-button)>.btn{flex:1 1 0;min-width:0}
 .material-discovery .paper-pagination{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1fr);gap:6px;font-size:11px;line-height:1.25}
 .material-discovery .paper-pagination>span{min-width:0;overflow-wrap:anywhere}
 .material-discovery .paper-pagination button{font-size:12px;min-height:44px;min-width:0;max-width:100%;padding:7px 6px;line-height:1.25;white-space:normal}
 .material-discovery .discovery-keepsakes{margin-inline:15px;padding-inline:8px;gap:15px}
 /* Keep the envelope and the extracted card large without losing the controls.
    The stable viewport avoids resizing the scene with Safari's address bar.
    The physical invitation ratio is still supplied by its selected format. */
 dialog.discovery.material-discovery .envelope-stage:is(.format-landscape,.format-square,.format-portrait){
  height:min(720px,max(180px,calc(100svh - 160px)),calc(min(calc((100svw - 16px)*.9),380px) / var(--envelope-ratio)*2 + 50px));
  --envelope-width:min(90cqw,calc((100cqh - 50px)*var(--envelope-ratio)*.5),380px);
 }
}
@media(prefers-reduced-motion:reduce){
 .material-discovery .envelope,.material-discovery .envelope *{animation:none!important;transition:none!important}
}
.reduced-motion .material-discovery .envelope,.reduced-motion .material-discovery .envelope *{animation:none!important;transition:none!important}

/* A faire-part opens at its fold. A card keeps its existing front/back turn. */
.material-discovery.fp-fold-discovery .paper-turner{transform:none!important}
.material-discovery.fp-fold-discovery .paper-front{z-index:3;transform-origin:0 50%;transition:transform 1.05s cubic-bezier(.3,.5,.25,1)}
.material-discovery.fp-fold-discovery .paper-back{z-index:1;transform:none;background:transparent;border:0;box-shadow:none;overflow:visible}
.material-discovery.fp-fold-discovery.is-reading .paper-front{transform:rotateY(-180deg)}
.material-discovery.fp-fold-discovery.fp-is-spread .paper-back{left:-100%;right:auto;width:200%}
.material-discovery.fp-fold-discovery .fp-open-spread{width:100%;height:100%;box-shadow:none}
.material-discovery.fp-fold-discovery .fp-spread-left{transform-origin:100% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg);transition:transform 1.05s cubic-bezier(.3,.5,.25,1)}
.material-discovery.fp-fold-discovery.is-reading .fp-spread-left{transform:rotateY(0)}
.material-discovery.fp-fold-discovery.is-reading.fp-is-spread.card-in-motion .fp-spread-left{animation:fp-unfold-leaf 1.05s cubic-bezier(.3,.5,.25,1) both}
.material-discovery.fp-fold-discovery.is-reading .envelope.is-open .env-paper{transform:translate(var(--read-x,0px),var(--read-y,-150px)) scale(var(--read-scale,1.5));transform-origin:50% 50%}

.fp-spread-reading-tools{display:flex;width:100%;justify-content:center;gap:10px;flex-wrap:wrap}
.fp-spread-reading-tools button{min-height:44px;padding:9px 16px;border:1px solid #ac9367;border-radius:24px;background:#fffaf0;color:#344b3b;font:13px/1.3 var(--sans,Arial,sans-serif)}
@keyframes fp-unfold-leaf{from{transform:rotateY(180deg)}to{transform:rotateY(0)}}
@media(max-width:760px){.fp-spread-reading-tools{gap:7px}.fp-spread-reading-tools button{min-width:0;flex:1 1 0;padding:8px 10px;font-size:12px;white-space:normal}}
@media(prefers-reduced-motion:reduce){.material-discovery.fp-fold-discovery .fp-spread-left{animation:none!important;transition:none!important}}
.reduced-motion .material-discovery.fp-fold-discovery .fp-spread-left{animation:none!important;transition:none!important}

/* A closed envelope never exposes its contents, even after an unfolded invitation. */
.material-discovery .envelope:not(.is-open) .env-paper{visibility:hidden;pointer-events:none}
.material-discovery:not(.is-reading):not(.card-in-motion) .paper-back{visibility:hidden;pointer-events:none}

/* Make the second opening explicit and readable, including on phones. */
.material-discovery.fp-fold-discovery .discovery-actions .fine{font-size:14px;line-height:1.5;color:#4b503d}
.material-discovery .discovery-actions .fp-fold-prompt{flex-basis:100%;margin:0}