/* p6.css - prototype P6, le comptoir et le scan. Reprend le telephone de P3 (p3.css). */
:root { --tel-h: 74vh; }
body { overflow-x: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.p6-barre { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; padding: 18px 28px; font-size: 13px; color: var(--encre-2); pointer-events: none; }
.p6-barre strong { color: var(--encre); }
main { position: relative; z-index: 1; }
.p6-avant { min-height: 80vh; display: grid; place-items: center; color: var(--encre-2); font-size: 15px; text-align: center; padding: 0 7vw; }
.p6-apres { min-height: 100vh; display: grid; align-content: center; padding: 0 7vw; }

/* le texte d un chapitre : meme gabarit partout */
.p6-txt, .p6-apres { position: relative; z-index: 4; max-width: 27vw; }
.p6-txt small, .p6-apres small { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--teinte-texte); margin-bottom: 14px; }
.p6-txt h2, .p6-apres h2 { margin: 0 0 .45em; font-size: clamp(32px, 3.4vw, 54px); line-height: 1.04; letter-spacing: -.02em; }
.p6-txt p, .p6-apres p { margin: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: var(--encre-2); max-width: 34ch; }

/* ------------------------------------------------------------ le comptoir */
.p6-comptoir { position: relative; min-height: 100vh; display: grid; align-content: center; padding: 0 7vw; overflow: hidden; }
.p6-plan { position: absolute; left: 0; right: 0; bottom: 0; height: 30vh; z-index: 0;
  background: linear-gradient(color-mix(in srgb, var(--teinte) 35%, #120c0e), #0b0809); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.p6-affiche { position: absolute; z-index: 2; right: 33vw; bottom: 17vh; margin: 0; width: 17vw; aspect-ratio: 210 / 297;
  background: #f7f5f1; color: #141416; border-radius: 3px; padding: 2vw 1.6vw; display: grid; align-content: start; justify-items: center; gap: .9vw; text-align: center;
  box-shadow: 0 40px 60px -20px rgba(0, 0, 0, .75); transform: perspective(1400px) rotateX(10deg) rotateY(-12deg); }
.p6-affiche b { font-size: 1.25vw; line-height: 1.15; }
.p6-affiche span { font-size: .82vw; line-height: 1.35; }
.p6-affiche canvas { width: 64%; image-rendering: pixelated; }
.p6-affiche small { font-size: .66vw; color: #555; }
.tel.p6-tel-comptoir { --tel-h: 62vh; --tel-x: 84%; --tel-y: 22vh; z-index: 3; }

/* ------------------------------------------------------------ le scan */
.p6-scan { position: relative; height: 100vh; display: grid; align-content: center; padding: 0 7vw; overflow: hidden; }
.tel.p6-tel-scan { --tel-h: 72vh; --tel-x: 46%; --tel-y: 10vh; z-index: 3; }

/* le pass Wallet du client : la vraie carte en haut, le QR dans son cartouche blanc */
.p6-passe { position: absolute; left: 5%; right: 5%; top: 19%; border-radius: 4.5% / 3.2%; overflow: hidden; background: var(--teinte);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.p6-passe canvas.carte { display: block; width: 100%; border-radius: 12px 12px 0 0; }
.p6-passe .cartouche { margin: 7% auto 8%; width: 46%; aspect-ratio: 1; background: #fff; border-radius: 8%; display: grid; place-items: center; position: relative; }
.p6-passe .cartouche canvas { width: 86%; image-rendering: pixelated; }
.p6-notif { position: absolute; left: 4%; right: 4%; top: 7.5%; z-index: 5;   /* sous l ilot et la barre d etat */ padding: 10px 12px; border-radius: 18px; background: rgba(66, 64, 68, .94);
  color: #fff; font-size: calc(var(--tel-h) * .0165); line-height: 1.3; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; transform: translateY(-140%); opacity: 0; }
.p6-notif i { grid-row: span 2; width: calc(var(--tel-h) * .045); aspect-ratio: 1; border-radius: 22%; background: var(--teinte); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.p6-notif b { font-weight: 600; }

/* le scan : un trait de lumiere qui balaie le QR, aller et retour, pendant le maintien ; un eclat quand c est lu */
.p6-passe .cartouche { overflow: hidden; }
/* Paul, 06/10 : « a peine plus visible » - bande plus haute et plus dense, trait plus franc, halo */
.p6-balayage { position: absolute; left: -4%; right: -4%; top: 0; height: 24%; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(60, 210, 120, .38) 62%, rgba(110, 255, 160, 1) 95%, transparent);
  filter: drop-shadow(0 2px 6px rgba(60, 230, 130, .75));
  transition: opacity .2s ease; }
.p6-balayage.is-actif { opacity: 1; animation: p6-balaye 1.1s ease-in-out infinite alternate; }
@keyframes p6-balaye { from { top: -24%; } to { top: 100%; } }
.p6-eclat { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* le jeu : maintenir pour scanner */
.p6-jeu { position: absolute; z-index: 5; right: 6vw; top: 50%; translate: 0 -50%; display: grid; justify-items: center; gap: 12px; max-width: 26ch; text-align: center; }
#p6-scanner { position: relative; width: 132px; height: 132px; border-radius: 50%; border: 0; background: none; color: var(--encre); cursor: pointer; padding: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
#p6-scanner svg { position: absolute; inset: 0; rotate: -90deg; }
#p6-scanner circle { fill: none; stroke-width: 5; }
#p6-scanner .fond { stroke: rgba(241, 237, 230, .18); }
#p6-scanner .plein { stroke: var(--encre); stroke-linecap: round; stroke-dasharray: 289.03; stroke-dashoffset: 289.03; }
#p6-scanner span { position: relative; display: block; padding: 0 18px; font-size: 14px; font-weight: 700; line-height: 1.25; }
#p6-scanner:focus-visible { outline: 2px solid var(--encre); outline-offset: 6px; }
#p6-scanner:disabled { cursor: default; opacity: .4; }
.p6-aide { margin: 0; font-size: 12px; color: rgba(241, 237, 230, .45); }
.p6-invite { margin: 0; font-size: 14px; color: var(--encre-2); }
.p6-message { margin: 0; min-height: 3em; font-size: 16px; font-weight: 600; }
.p6-legende { position: absolute; z-index: 4; left: 7vw; bottom: 6vh; margin: 0; font-size: 13px; color: var(--encre-2); max-width: 30ch; text-align: left; }

/* l onde du tampon : elle remplit l ecran, et le chapitre suivant nait de sa couleur (idee 4) */
#p6-onde { position: absolute; z-index: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--teinte); left: 52%; top: 52%; translate: -50% -50%; transform: scale(0); opacity: .9; pointer-events: none; }

.p6-outils { position: fixed; right: 28px; bottom: 26px; z-index: 10; }
.p6-outils button { font-size: 12px; color: var(--encre-2); background: rgba(14, 13, 11, .62); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 8px 14px; cursor: pointer; }

/* fenetres moyennes (celle de Paul : 959 px) : le telephone se decale a gauche, le jeu se resserre a droite -
   l aide et le message ne mordent plus sur le telephone (vu le 06/10 a 959 x 800) */
@media (min-width: 761px) and (min-aspect-ratio: 4001/5000) and (max-width: 1200px) {
  .p6-txt { max-width: 23vw; }
  .p6-txt h2 { font-size: clamp(26px, 2.9vw, 36px); }
  .p6-txt p { font-size: 15px; }
  .p6-legende { max-width: 24ch; }
  .tel.p6-tel-scan { --tel-h: 62vh; --tel-x: 46%; }
  .p6-jeu { right: 3vw; max-width: 21ch; }
  #p6-scanner { width: 112px; height: 112px; }
  .p6-aide { display: none; }
  .tel.p6-tel-comptoir { --tel-h: 56vh; --tel-x: 85%; }
  .p6-affiche { right: 30vw; width: 20vw; }
}
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .p6-txt, .p6-apres { max-width: none; }
  .p6-comptoir { align-content: start; padding-top: 90px; }
  .p6-affiche { right: auto; left: 8vw; width: 42vw; bottom: 14vh; }
  .p6-affiche b { font-size: 3.4vw; } .p6-affiche span { font-size: 2.4vw; } .p6-affiche small { font-size: 2vw; }
  .tel.p6-tel-comptoir { --tel-h: 40svh; --tel-x: 72%; --tel-y: 44vh; }   /* Paul, 08/10 : une marge a droite */
  /* Paul, 08/10 : plus d arret ni de bouton, le tampon se pose quand le telephone arrive a l ecran */
  .p6-scan { align-content: start; padding-top: 80px; height: calc(270px + 46svh + 130px); }
  #p6-scanner, .p6-invite { display: none; }
  /* le telephone passe SOUS le texte (270 px = barre + titre sur deux lignes + trois lignes) et s arrete avant le bouton */
  .tel.p6-tel-scan { --tel-h: 46svh; --tel-x: 50%; --tel-y: 270px; }
  .p6-passe { left: 14%; right: 14%; top: 17%; }   /* le pass tient dans l ecran, QR compris */
  /* top: auto - sans lui le « top: 50% » du PC etirait le bloc jusqu au milieu, par-dessus le telephone */
  .p6-jeu { left: 50%; top: auto; bottom: 2vh; translate: -50% 0; gap: 6px; width: 86vw; max-width: none; }
  .p6-message { min-height: 0; }
  #p6-scanner { width: 104px; height: 104px; }
  .p6-aide { display: none; }
  .p6-legende { display: none; }
  .p6-outils { display: none; }
}
/* grand ecran vertical (Paul, 22/10) : les places en vh laissaient ~550 px de vide sous le texte, qui garde sa taille.
   L affiche et le telephone se calent sous le texte ; la section prend leur hauteur. */
@media (min-width: 761px) and (max-aspect-ratio: 4/5) {
  .p6-comptoir { min-height: 0; height: calc(max(300px + 40svh, 380px + 59.4vw) + 8vh); }
  .tel.p6-tel-comptoir { --tel-y: 300px; }
  .p6-affiche { top: 380px; bottom: auto; }
}

/* une fois le scan passe, le bouton et son aide s en vont : seul reste le message */
.p6-jeu.is-fait #p6-scanner, .p6-jeu.is-fait .p6-aide, .p6-jeu.is-fait .p6-invite { display: none; }