/* My Portique · téléphone virtuel et démo de l'appli.
   Les cotes reprennent les captures de l'appli (écran de 450 px de large) : 1 unité = var(--u). */
.phone { --pw: 320px; position: relative; width: var(--pw); aspect-ratio: 9 / 19.3; background: #0B1220; border-radius: calc(var(--pw) * .15); padding: calc(var(--pw) * .034); box-shadow: 0 0 0 2px #2A3A55, 0 50px 90px -30px rgba(0, 0, 0, .65); flex: none; }
.phone::before { content: ""; position: absolute; top: calc(var(--pw) * .06); left: 50%; transform: translateX(-50%); width: 30%; height: calc(var(--pw) * .08); background: #0B1220; border-radius: 99px; z-index: 5; }
.phone-screen { position: relative; height: 100%; border-radius: calc(var(--pw) * .118); overflow: hidden; background: #fff; container-type: inline-size; isolation: isolate; }

.app { --u: calc(100cqw / 450); --navy: #173B66; --grey: #666; position: absolute; inset: 0; display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; color: #000; font-size: calc(var(--u) * 17); line-height: 1.3; text-align: left; }
.app svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app svg.f { fill: currentColor; stroke: none; }
.app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.a-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.a-scroll::-webkit-scrollbar { display: none; }
.a-pad { padding: calc(var(--u) * 78) calc(var(--u) * 18) calc(var(--u) * 20); }
.a-pad2 { padding: calc(var(--u) * 6) calc(var(--u) * 18) calc(var(--u) * 24); }

/* En-tête des listes */
.a-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: calc(var(--u) * 30); }
.a-title { margin: 0 0 calc(var(--u) * 10); font: 700 calc(var(--u) * 35)/1.1 Arial, Helvetica, sans-serif; color: var(--navy); }
.a-title-solo { margin-bottom: calc(var(--u) * 22); }
.a-chip { display: inline-block; background: #E9EDF2; border-radius: 99px; padding: calc(var(--u) * 7) calc(var(--u) * 13); font-size: calc(var(--u) * 15); color: #1B2A40; }
.a-avatar { width: calc(var(--u) * 50); height: calc(var(--u) * 50); border-radius: 50%; margin-right: calc(var(--u) * -12); }
.a-side { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 16); }
.app .a-link { display: flex; align-items: center; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 13); color: var(--navy); margin-right: calc(var(--u) * -12); }

/* Cartes */
.a-card { display: block; width: 100%; border-radius: calc(var(--u) * 10); overflow: hidden; background: #fff; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 14) rgba(0, 0, 0, .13); }
.a-card img { display: block; width: 100%; aspect-ratio: 417 / 200; object-fit: cover; }
.a-card strong { display: block; padding: calc(var(--u) * 22) calc(var(--u) * 20) calc(var(--u) * 24); font: 700 calc(var(--u) * 26)/1.1 Arial, Helvetica, sans-serif; }
.a-card-btn { transition: transform .15s; }
.a-card-btn:hover { transform: scale(.985); }
.a-card-btn { animation: tapme 2.4s ease-in-out 1.2s 3; }
@keyframes tapme { 0%, 100% { box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 14) rgba(0, 0, 0, .13); } 50% { box-shadow: 0 0 0 calc(var(--u) * 5) rgba(246, 172, 34, .6), 0 calc(var(--u) * 3) calc(var(--u) * 14) rgba(0, 0, 0, .13); } }
.a-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; border-radius: calc(var(--u) * 7); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(0, 0, 0, .1); padding: calc(var(--u) * 9) calc(var(--u) * 16); min-height: calc(var(--u) * 50); margin-bottom: calc(var(--u) * 12); font-size: calc(var(--u) * 18); }
.a-row-big { font: 700 calc(var(--u) * 27)/1.1 Arial, Helvetica, sans-serif; padding: calc(var(--u) * 20); margin-bottom: calc(var(--u) * 26); }

/* Bouton flottant + barre d'onglets */
.a-fab { position: absolute; right: calc(var(--u) * 12); bottom: calc(var(--u) * 64); display: flex; align-items: center; gap: calc(var(--u) * 10); background: var(--navy); color: #fff; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 14) calc(var(--u) * 16); font-size: calc(var(--u) * 16); }
.a-fab svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.a-tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--navy); padding: calc(var(--u) * 8) 0 calc(var(--u) * 10); flex: none; }
.app .a-tabs button { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); color: #C8D2E0; font-size: calc(var(--u) * 11); text-align: center; }
.a-tabs svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.app .a-tabs .on { color: #F6AC22; }

/* Écran portique : barre + onglets segmentés */
.a-bar { flex: none; background: linear-gradient(180deg, #17406E, #173B66); color: #fff; padding: calc(var(--u) * 74) calc(var(--u) * 26) calc(var(--u) * 6); }
.a-bar-top { position: relative; text-align: center; font-size: calc(var(--u) * 17); margin-bottom: calc(var(--u) * 10); }
.a-bar-top b, .a-bar-simple b { font-weight: 700; }
.app .a-back { position: absolute; left: calc(var(--u) * -18); top: 0; display: flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 17); color: #fff; }
.a-back svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); stroke-width: 2.6; }
.a-seg { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255, 255, 255, .13); border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 3); }
.app .a-seg button { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 4) 0 calc(var(--u) * 3); border-radius: calc(var(--u) * 6); font: 700 calc(var(--u) * 13)/1.1 Arial, sans-serif; color: #fff; text-align: center; }
.a-seg svg, .a-i { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.a-i { font: 700 calc(var(--u) * 20)/1 "Courier New", monospace; }
.app .a-seg .on { background: #fff; color: var(--navy); font-weight: 400; }
.a-bar-simple { display: flex; align-items: center; gap: calc(var(--u) * 26); padding: calc(var(--u) * 76) calc(var(--u) * 18) calc(var(--u) * 14); font-size: calc(var(--u) * 17); }
.a-bar-simple .a-back { position: static; }

.a-h { margin: calc(var(--u) * 26) 0 calc(var(--u) * 18); font: 400 calc(var(--u) * 23)/1.2 Arial, Helvetica, sans-serif; color: #000; letter-spacing: 0; }
.app .a-play { flex: none; display: grid; place-items: center; width: calc(var(--u) * 44); height: calc(var(--u) * 32); border-radius: calc(var(--u) * 6); background: var(--navy); color: #fff; transition: background .2s, transform .1s; }
.a-play svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.app .a-play:hover { background: #24548F; }
.app .a-play:active { transform: scale(.92); }
.app .a-play.sent { background: #2ECC59; }
.a-media { display: block; width: calc(100% + var(--u) * 32); margin: 0 calc(var(--u) * -16); border-radius: calc(var(--u) * 6); }
.a-vnc { box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(0, 0, 0, .2); }

.a-switch { flex: none; position: relative; width: calc(var(--u) * 50); height: calc(var(--u) * 30); border-radius: 99px !important; background: #E9E9EB !important; transition: background .2s; }
.a-switch i { position: absolute; top: calc(var(--u) * 2); left: calc(var(--u) * 2); width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.a-switch.on { background: var(--navy) !important; }
.a-switch.on i { transform: translateX(calc(var(--u) * 20)); }
[data-emergency].on { background: #D62C2C !important; }

.a-line { display: flex; justify-content: space-between; align-items: center; min-height: calc(var(--u) * 45); border-bottom: 1px solid #CFCFCF; margin: 0 calc(var(--u) * -4); font-size: calc(var(--u) * 16); }
.a-dot { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: #2ED158; transition: background .3s; }
.a-dot.ko { background: #E53935; box-shadow: 0 0 0 calc(var(--u) * 5) rgba(229, 57, 53, .2); }
.a-hist { background: #fff; border-radius: calc(var(--u) * 8); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 12) rgba(0, 0, 0, .1); padding: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 16); margin-bottom: calc(var(--u) * 16); color: var(--grey); }
.a-hist small { display: block; font: 700 calc(var(--u) * 13)/1 Arial, sans-serif; margin-bottom: calc(var(--u) * 16); }
.a-hist p { margin: 0; font-size: calc(var(--u) * 17); line-height: 1.55; }
.a-intro { font-size: calc(var(--u) * 16); margin: calc(var(--u) * 26) 0; line-height: 1.2; }
.a-hello { font-size: calc(var(--u) * 21); margin: 0 0 calc(var(--u) * 20); }
.a-prow { display: flex; align-items: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 13) 0; border-bottom: 1px solid #CFCFCF; font-size: calc(var(--u) * 17); margin: 0 calc(var(--u) * -18); padding-inline: calc(var(--u) * 18); }
.a-prow svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); color: var(--navy); stroke-width: 1.6; }
.a-gap { margin-top: calc(var(--u) * 14); }

/* Toast dans le téléphone */
.app-toast { --u: calc(100cqw / 450); position: absolute; left: 50%; bottom: calc(var(--u) * 80); transform: translate(-50%, 20px); width: max-content; max-width: 88%; background: #1B2A40; color: #fff; font: 600 calc(var(--u) * 15)/1.3 Arial, sans-serif; padding: calc(var(--u) * 12) calc(var(--u) * 16); border-radius: calc(var(--u) * 12); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 6; text-align: center; }
.app-toast.show { opacity: 1; transform: translate(-50%, 0); }
.app-toast.ok { background: #14864A; }
.app-toast.warn { background: #C0392B; }

/* Hero : téléphone + étiquette « c'est la démo » */
.hero-phone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.try-hint { display: inline-flex; align-items: center; gap: 8px; background: rgba(246, 172, 34, .14); border: 1px solid rgba(246, 172, 34, .5); color: var(--yellow); font: 700 .9rem/1 var(--head); padding: 9px 16px; border-radius: 99px; }
.try-hint svg { width: 18px; height: 18px; }

@media (max-width: 600px) {
  .phone { --pw: min(290px, 100vw - 48px); }
}