/* Coordonnées proportionnelles au gabarit 971 × 1619 fourni. */
.application:has(#porteCartes:not([hidden])) { padding-bottom: 105px; }
.application:has(#porteCartes:not([hidden])) header { margin-bottom: 18px; }
.vue-cartes { min-height: 50vh; }
.vue-cartes h1 { color: #070e38; }
.vue-cartes a { display: block; padding: 15px; border-radius: 12px; background: white; margin: 10px 0; color: #252b80; }
.vignette-carte { width: 100%; min-height: 145px; text-align: left; margin: 16px 0; padding: 25px; display: grid; align-content: end; gap: 12px; border-radius: 20px; color: #090f3e; background: linear-gradient(135deg, #fff9ef, #f7f3ff 60%, #e9eaff); border: 2px solid #d8c1ef; box-shadow: 0 12px 25px #20205023; }
.vignette-carte strong { font-size: 1.45rem; }.vignette-carte span { color: #454c74; font-size: 1.05rem; }
.navigation-cartes { position: fixed; z-index: 5; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; padding: 10px max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)); background: white; box-shadow: 0 -4px 18px #08093b15; }
.navigation-cartes button { flex: 1; max-width: 105px; min-height: 52px; display: grid; place-items: center; padding: 8px; color: #454c74; background: transparent; touch-action: manipulation; -webkit-touch-callout: none; user-select: none; }
.navigation-cartes svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navigation-cartes button:focus-visible { outline: 2px solid #6532cb; outline-offset: -3px; border-radius: 9px; }
.navigation-cartes button[aria-current] { color: #6532cb; border-bottom: 3px solid #bd33b7; }
.info-navigation { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 20px); padding: 8px 13px; border-radius: 10px; background: #101438; color: white; font-size: 1rem; line-height: 1.2; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 12px #10143855; pointer-events: none; }
.actions-cartes { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
#videoScan { display: block; max-width: 100%; margin: 18px auto; border-radius: 12px; }
.carte-plein-ecran { position: fixed; z-index: 20; inset: 0; overflow: auto; padding: max(16px, env(safe-area-inset-top)) 8px max(20px, env(safe-area-inset-bottom)); background: #e8eafb; text-align: center; }
.carte-plein-ecran > button { display: block; margin: 0 auto 10px; }
.surface-carte { position: relative; width: min(100%, 460px, calc((100vh - 125px) * 971 / 1619)); aspect-ratio: 971 / 1619; margin: auto; background: url('/carte-membre-gabarit.png') center / 100% 100% no-repeat; box-shadow: 0 16px 45px #0e104044; color: #070e38; }
.photo-carte { position: absolute; left: 27.5%; top: 23.35%; width: 45%; height: 26.35%; border-radius: 10%; overflow: hidden; background: #f9f8f8; display: grid; place-items: center; font-size: clamp(2rem, 9vw, 6rem); color: #ada4d6; }
.photo-carte img { width: 100%; height: 100%; object-fit: cover; }
.valeur-carte { position: absolute; left: 24.2%; width: 64%; text-align: left; font-size: clamp(16px, 4.3vw, 22px); font-weight: 700; line-height: 1.15; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.valeur-carte.numero { top: 55.25%; }.valeur-carte.nom { top: 62.2%; }.valeur-carte.categorie { top: 69.1%; }.valeur-carte.expiration { top: 76%; }
.valeur-carte.statut { top: 85.7%; left: 27.5%; width: 30%; font-size: clamp(15px, 3.5vw, 19px); color: #8129c1; }
.qr-carte { position: absolute; left: 69.5%; top: 81.6%; width: 14%; aspect-ratio: 1; display: grid; place-items: center; font-size: 8px; overflow: hidden; }
.qr-carte img, .qr-carte canvas { width: 100% !important; height: 100% !important; }
.avertissement-carte { padding: 8px 12px; max-width: 460px; margin: 8px auto; color: #303462; background: #fff; border-radius: 10px; }
.details-carte { max-width: 460px; margin: 12px auto; padding: 18px; border-radius: 16px; background: #fff; text-align: left; box-shadow: 0 5px 20px #11114213; }
.details-carte h2 { margin-bottom: 12px; color: #0a113d; }
.details-carte dl { margin: 0; }
.details-carte dl > div { display: grid; grid-template-columns: minmax(110px, 42%) 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid #e5e6f1; }
.details-carte dt { color: #525976; font-size: 1rem; }
.details-carte dd { margin: 0; color: #0a113d; font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.qr-agrandi { display: flex; justify-content: center; max-width: 240px; margin: 12px auto 20px; padding: 12px; background: white; border-radius: 12px; }
[hidden] { display: none !important; }