/* Ouverture d'un arrivage : pochette, pile de cartes, récapitulatif. Toutes les règles sont préfixées par .ouverture : la feuille est chargée
   sur toutes les pages (l'ouverture se fait dans une pop-in) et ne doit toucher que sa propre vue. */
.ouverture .po-zone{display:grid;place-items:center;padding:34px 0 8px;min-height:340px}
.ouverture .po-zone .pochette{width:calc(var(--ouv-w)*.78);touch-action:pan-y;container-type:inline-size}
.ouverture .po-zone .po-contenu{font-size:9.4cqw;gap:2.4cqw}
.ouverture .po-zone .po-contenu small{font-size:7.2cqw}
.ouverture .pile{position:relative;width:var(--ouv-w);aspect-ratio:5/7;margin:6px auto 0;outline:none}
.ouverture .pile:focus-visible{outline:3px solid var(--orange);outline-offset:10px;border-radius:14px}
.ouverture .rev-item{position:absolute;inset:0;--k:0;--s:1;z-index:calc(10 - var(--k));transform:translateY(calc(var(--k)*-9px)) scale(calc(1 - var(--k)*.04)) rotate(calc(var(--k)*1.2deg*var(--s)));transition:transform .85s cubic-bezier(.2,.9,.3,1.1),opacity .45s}
.ouverture .rev-item .carte{--w:100%;width:100%}
.ouverture .rev-item:not(.haut){pointer-events:none}
.ouverture .rev-item.parti{transform:translateX(-135%) rotate(-14deg);opacity:0;pointer-events:none}
.ouverture .halo{position:absolute;inset:-24%;border-radius:50%;opacity:0;pointer-events:none;z-index:-1}
.ouverture .particule{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;opacity:0}
.ouverture .legende-carte{min-height:3em;font:500 15px/1.45 var(--titre);color:var(--doux);max-width:34ch}
.ouverture .legende-carte b{color:var(--marque);font-weight:600}
.ouverture .lueur{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:0}
.dore-fond{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .8s;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(201,150,26,.20),transparent 70%)}
body.dore .dore-fond{opacity:1}
.ouverture .scene>*{position:relative;z-index:1}
/* Récapitulatif : 3 cartes qui se chevauchent sur la première ligne, 2 côte à côte (centrées) sur la suivante */
.ouverture .recap{--cw:min(180px,calc((100vw - 36px)/2.35));display:grid;gap:18px;justify-items:center;width:100%}
.ouverture .recap__ligne{display:flex;justify-content:center;gap:14px}
.ouverture .recap__ligne.trois{gap:0}
.ouverture .recap .carte-lien{width:var(--cw);flex:none;position:relative;z-index:1;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ouverture .recap__ligne.trois .carte-lien+.carte-lien{margin-left:calc(var(--cw)*-.33)}
/* :where() ne pèse rien : au survol (z-index 10), la carte passe toujours devant ses voisines, la 2e comme la 3e */
.ouverture .recap__ligne.trois :where(.carte-lien+.carte-lien){z-index:2}
.ouverture .recap__ligne.trois :where(.carte-lien+.carte-lien+.carte-lien){z-index:3}
.ouverture .recap .carte-lien:hover,.ouverture .recap .carte-lien:focus-visible{z-index:10;transform:translateY(-10px)}
.ouverture .resume{font:500 15px/1.45 var(--titre);color:var(--doux)}
.ouverture .resume b{color:var(--marque);font-weight:600}
.ouverture .stage{position:relative;width:var(--ouv-w);aspect-ratio:5/7;margin:28px auto 8px}
.ouverture .stage .pile{position:absolute;inset:0;margin:0;width:auto;z-index:1}
.ouverture .stage .pile.devant{z-index:3}
.ouverture .stage .pile.inactive{pointer-events:none}
.ouverture .stage .po-zone{position:absolute;inset:0;z-index:2;padding:0;min-height:0;display:grid;place-items:center}
.ouverture .bas{min-height:150px;display:grid;align-content:start;width:100%}
.ouverture .bloc{display:grid;gap:18px;justify-items:center;text-align:center}
.ouverture .bloc[hidden]{display:none}
.ouverture .rev-item.range{transform:translateY(var(--hy)) scale(var(--sp));opacity:1;transition:none}
.ouverture .rev-item.eventail{transform:translate(var(--ex),var(--ey)) scale(var(--sp)) rotate(var(--er));transition:transform .95s cubic-bezier(.34,1.35,.5,1)}
@media (prefers-reduced-motion:reduce){.ouverture .recap .carte-lien{transition:none}.ouverture .rev-item,.ouverture .pochette.sortie{transition-duration:.01s;transition-delay:0s!important}}

/* Structure de la vue d'ouverture */
.ouverture .vue{display:grid;justify-items:center;align-content:center;gap:16px;text-align:center}
.ouverture .vue[hidden]{display:none}
.ouverture .vue h2{font-size:24px}
.ouverture .consigne,.ouverture .compteur{font:500 15px/1.45 var(--titre);color:var(--doux);max-width:34ch}
.ouverture .compteur{font-weight:600}
.ouverture .actions{display:grid;gap:10px;justify-items:center}
.ouverture .actions .ligne{justify-content:center}
.ouverture .demo{font:500 13px var(--titre);color:var(--doux)}
.ouverture .demo button{font:600 13px var(--titre);background:none;border:0;color:var(--marque);text-decoration:underline;text-underline-offset:3px;padding:6px}

/* Les cartes restent invisibles tant que la déchirure n'a pas commencé */
.ouverture .pile:not(.cartes-pretes) .rev-item{visibility:hidden}
.ouverture .vue .retour{justify-self:start}
.ouverture .fermer{font:600 14px var(--titre);text-decoration:none}
/* Taille de la scène (pochette, pile de cartes) : proportionnelle à la hauteur disponible, pour que tout tienne à l'écran sans défiler.
   340 px = titre, consigne, marges et la feuille de la pop-in ; plancher de 168 px sur les petits écrans, plafond de 290 px. */
.ouverture{--ouv-w:clamp(168px,calc((100vh - 340px)*5/7),min(72vw,290px));--ouv-w:clamp(168px,calc((100dvh - 340px)*5/7),min(72vw,290px));max-width:560px;margin:0 auto;padding:14px 18px 30px;position:relative;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr}
.ouverture>*{position:relative;z-index:1}
.ouverture .barre{display:flex;justify-content:space-between;align-items:center;padding:4px 0 8px}
.ouverture .vue{align-content:center}
.ouverture .demo{font:500 13px var(--titre);color:var(--doux)}
.ouverture .demo a{margin-left:8px}

/* Dans la pop-in : pas de barre ni de pleine hauteur, fond doré pour un arrivage doré */
.ouverture.ouverture--popin{min-height:0;padding-top:26px;padding-bottom:20px;grid-template-rows:1fr}
.ouverture.ouverture--popin .vue{padding-bottom:10px}
.ouverture.ouverture--popin[data-mode="dore"]{background:radial-gradient(ellipse 90% 45% at 50% 0,rgba(201,150,26,.22),transparent 72%)}
.ouverture.ouverture--popin .stage{margin:18px auto 4px}
.ouverture.ouverture--popin .bas{min-height:124px}
.ouverture.ouverture--popin h1{font-size:clamp(22px,3.2vw,28px)}
/* Révélation d'un exemplaire unique : le sceau est caché jusqu'à ce que la carte soit retournée, puis se pose comme un tampon */
.ouverture .rev-item[data-unique] .sceau{opacity:0}
.ouverture .rev-item.tampon .sceau{opacity:1;animation:sceau-tampon .75s cubic-bezier(.2,1.5,.4,1) both}
@keyframes sceau-tampon{0%{transform:scale(2.8) rotate(-26deg);opacity:0}45%{opacity:1}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ouverture .rev-item.tampon .sceau{animation:none}}
/* Une carte à sceau (exemplaire unique) passe devant les cartes qui la chevauchent : son sceau ne reste plus caché */
.ouverture .recap__ligne.trois .carte-lien:has(.sceau){z-index:5}