/* Joy B2B · les pages de la maison : merci, 404, mentions, confidentialité · v019. Les règles du site v012, scopées.
   La page égarée suit la maquette de Joy du 1/10 au soir : le seuil porte les mots, la carte porte le jeu, les sorties
   viennent ensuite (Joy, 1/10 au soir : sous le petit jeu). */

/* ---- la page égarée : le seuil ---- */
[data-page="404"] .eg-seuil .sous{max-width:48ch}
[data-page="404"] .devine{margin:1rem 0 0;font-size:var(--t-corps);color:var(--encre)}
[data-page="404"] .devine a{color:var(--action);font-weight:600;text-decoration-color:var(--eclat);text-underline-offset:3px}
[data-page="404"] .eg-sorties{max-width:46rem;margin-top:clamp(1.8rem,4cqw,2.4rem)}
[data-page="404"] .eg-actions{margin:0}
[data-page="404"] .eg-actions .btn{min-width:min(100%,17.5rem)}
[data-page="404"] .eg-ecrire{margin:1rem 0 0;font-size:var(--t-ui)}
[data-page="404"] .eg-ecrire a{color:var(--encre);text-decoration-color:var(--eclat);text-underline-offset:3px}
@container page (max-width: 760px){
  [data-page="404"] .eg-actions .btn{display:flex;width:100%}
  [data-page="404"] .eg-ecrire a{display:inline-block;padding-block:.7rem;margin-block:-.7rem}
}

/* ---- la carte du jeu : le titre et le compte, le banc, puis l'étape d'après ---- */
[data-page="404"] .eg-bloc{padding-top:0;border-top:0}
[data-page="404"] .eg-carte{max-width:46rem;padding:clamp(1.2rem,3cqw,1.8rem) clamp(1rem,3cqw,1.8rem) clamp(1.1rem,2.6cqw,1.4rem);background:var(--blanc);border:1px solid var(--voile);border-radius:var(--rayon)}
[data-page="404"] .eg-tete{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap}
[data-page="404"] .eg-tete .surtitre{margin:0}
[data-page="404"] .eg-compte{margin:0;font:600 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gris);font-variant-numeric:tabular-nums}
[data-page="404"] .eg-compte.un,[data-page="404"] .eg-compte.deux{color:var(--porteur)}

/* le banc : sept trèfles par rang, quatre au téléphone ; chaque trèfle garde son angle et sa taille (--r, --s), le geste
   joue sur le bouton, le tour sur le dessin, rien ne lui fait perdre son angle */
[data-page="404"] .banc{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(.3rem,1.4cqw,.9rem);margin:1.1rem 0 .3rem}
@container page (max-width: 560px){ [data-page="404"] .banc{grid-template-columns:repeat(4,minmax(0,1fr))} }
[data-page="404"] .banc button{display:grid;place-items:center;aspect-ratio:1;min-width:2.75rem;min-height:2.75rem;padding:9%;border:0;border-radius:.6rem;background:transparent;cursor:pointer;line-height:0}
[data-page="404"] .banc button:disabled{cursor:default}
[data-page="404"] .banc svg{width:100%;height:auto;display:block;overflow:visible;transform:rotate(var(--r,0deg)) scale(var(--s,1))}
/* le vert en sourdine de la maquette, assez soutenu pour se lire (3,2:1 sur le blanc) */
[data-page="404"] .banc .f{fill:#76987F;transition:fill .3s}
@media (hover:hover){ [data-page="404"] .banc button:not(:disabled):not(.trouve):hover .f{fill:var(--porteur)} }
[data-page="404"] .banc button.trouve .f{fill:var(--eclat)}
[data-page="404"] .banc button.rate{animation:eg-rate .24s var(--douce)}
[data-page="404"] .banc button.indice svg{animation:eg-indice 1.6s ease 1}
[data-page="404"] .banc button.trouve svg{animation:eg-tour 1.2s var(--tour) 1}
[data-page="404"] .banc.fini button:not(.trouve){opacity:.22}
@keyframes eg-rate{50%{transform:scale(.9)}}
@keyframes eg-indice{0%,100%{transform:rotate(var(--r,0deg)) scale(var(--s,1))}50%{transform:rotate(var(--r,0deg)) scale(calc(var(--s,1) * 1.14))}}
@keyframes eg-tour{from{transform:rotate(var(--r,0deg)) scale(var(--s,1))}to{transform:rotate(calc(var(--r,0deg) + 360deg)) scale(var(--s,1))}}

/* l'étape d'après (Joy, 1/10 au soir) : les deux trèfles trouvés tournent une fois, le banc s'efface derrière eux, et le
   signe de la maison se construit à côté de ce qu'il veut dire. Le lien mène au Dispositif, où le signe prend vie. */
[data-page="404"] .trouvaille{display:grid;grid-template-columns:clamp(5.5rem,13cqw,7.5rem) minmax(0,1fr);gap:clamp(1.1rem,3cqw,2rem);align-items:center;margin-top:.9rem;padding-top:1.2rem;border-top:1px solid var(--voile)}
[data-page="404"] .trouvaille[hidden]{display:none}
[data-page="404"] .tr-signe svg{width:100%;height:auto;display:block;overflow:visible}
[data-page="404"] .tr-c{fill:transparent;stroke:var(--voile-fonce);stroke-width:.04}
[data-page="404"] .tr-trefle{fill:var(--porteur);transform-origin:0 0}
[data-page="404"] .tr-titre{margin:0 0 .45rem;font:500 var(--t-h3)/1.23 var(--serif);letter-spacing:-.005em;color:var(--porteur);outline:none}
[data-page="404"] .tr-texte>p:not(.tr-titre){margin:0;max-width:46ch;font-size:var(--t-corps);line-height:1.55;color:var(--encre)}
[data-page="404"] .tr-lien{display:inline-flex;align-items:center;gap:.55rem;margin-top:.3rem;padding-block:.8rem;font:600 var(--t-ui)/1.3 var(--sans);color:var(--action);text-decoration:underline;text-decoration-color:var(--eclat);text-decoration-thickness:1.5px;text-underline-offset:4px}
[data-page="404"] .tr-lien svg{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--d-geste) var(--douce)}
[data-page="404"] .tr-lien:hover svg{transform:translateX(3px)}
@container page (max-width: 520px){
  [data-page="404"] .trouvaille{grid-template-columns:minmax(0,1fr);gap:.9rem;justify-items:start}
  [data-page="404"] .tr-signe{width:5.5rem}
}
@media (prefers-reduced-motion: no-preference){
  [data-page="404"] .banc.fini button:not(.trouve){transition:opacity .9s ease .3s}
  [data-page="404"] .trouvaille.entre{animation:eg-ouvre .7s var(--douce) both}
  [data-page="404"] .trouvaille.entre .tr-c{animation:eg-parait .5s ease calc(.25s + var(--d)) both}
  [data-page="404"] .trouvaille.entre .tr-trefle{animation:eg-parait .5s ease 1s both,eg-tourne 3.5s var(--tour) 1.3s 1}
  [data-page="404"] .trouvaille.entre .tr-texte{animation:eg-parait .7s ease .35s both}
}
@media (prefers-reduced-motion: reduce){
  [data-page="404"] .banc button.rate,[data-page="404"] .banc button.indice svg,[data-page="404"] .banc button.trouve svg{animation:none}
}
@keyframes eg-ouvre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes eg-parait{from{opacity:0}to{opacity:1}}
@keyframes eg-tourne{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* vers le Dispositif ou l'accueil : le signe passe d'une page à l'autre, comme entre l'accueil et le Dispositif */
@media (min-width:861px){ [data-page="404"] .trouvaille:not([hidden]) .tr-signe svg{view-transition-name:signe} }
@media print{ [data-page="404"] .eg-bloc{display:none} }

/* merci : le seuil et les questions, dans la colonne de lecture */
[data-page="merci"] .bloc .etroit p{max-width:var(--mesure)}

/* mentions : le téléphone en lettres se lit d'un tenant, « quatre-vingt-dix » ne se coupe pas à ses traits d'union (v057) */
[data-page="mentions-legales"] .insecable{white-space:nowrap}