/* MJMAX — app3 : styles communs (en complément de Tailwind CSS) */
:root {
  --bg: #0a0b10;
  --panel: #0c0d13;
  --card: #12141b;
  --card-hi: #171922;
  --line: #1f2230;
  --muted: #8b90a0;
  --orange: #f97316;
  --orange-deep: #ea580c;
  --green: #22c55e;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-rendering: optimizeLegibility; }
::selection { background: rgba(249, 115, 22, .35); }

/* barres de defilement discretes */
.thin-scroll { scrollbar-width: thin; scrollbar-color: #262a38 transparent; }
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #262a38; border-radius: 9999px; }

/* ---------- boutons ---------- */
.btn-orange {
  background: linear-gradient(135deg, #ff7d1c 0%, #f05d0b 100%);
  box-shadow: 0 16px 34px -14px rgba(249, 115, 22, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-orange:hover { filter: brightness(1.06); box-shadow: 0 20px 38px -14px rgba(249, 115, 22, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-orange:active { transform: scale(.985); }
.btn-orange[disabled] { opacity: .65; cursor: progress; }
:focus-visible { outline: 2px solid rgba(249, 115, 22, .8); outline-offset: 2px; }

/* ======================================================================
   CONNEXION
   ====================================================================== */
.login-photo {
  background-image: url('../assets/hero-tower-sign.jpg');
  background-size: 128% auto;
  background-position: 0 38%;
  background-repeat: no-repeat;
}
.login-shade {
  background:
    linear-gradient(90deg, rgba(7, 7, 11, .97) 0%, rgba(7, 7, 11, .9) 36%, rgba(7, 7, 11, .38) 68%, rgba(7, 7, 11, .12) 100%),
    linear-gradient(180deg, rgba(7, 7, 11, .45) 0%, rgba(7, 7, 11, 0) 30%, rgba(7, 7, 11, .55) 100%);
}
@media (min-width: 1024px) {
  /* coin superieur droit coupe en biseau, comme sur la maquette */
  .login-hero { clip-path: polygon(0 0, calc(100% - 84px) 0, 100% 56px, 100% 100%, 0 100%); }
}
@media (max-width: 1023px) {
  .login-photo { background-size: cover; background-position: 62% 40%; }
  .login-shade {
    background:
      linear-gradient(180deg, rgba(7, 7, 11, .55) 0%, rgba(7, 7, 11, .78) 70%, rgba(7, 7, 11, .96) 100%);
  }
}
.glass {
  background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7);
}
.feature-icon {
  background: linear-gradient(145deg, rgba(249, 115, 22, .22), rgba(249, 115, 22, .08));
  border: 1px solid rgba(249, 115, 22, .22);
  color: #ff8a2a;
}
.login-right {
  background:
    radial-gradient(520px 340px at 100% 0%, rgba(249, 115, 22, .16), transparent 70%),
    radial-gradient(460px 320px at 100% 100%, rgba(249, 115, 22, .14), transparent 70%),
    #ffffff;
}
.login-card { box-shadow: 0 40px 90px -40px rgba(234, 88, 12, .35), 0 2px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(15, 17, 23, .04); }
.field-light {
  background: #fff;
  border: 1px solid #e5e7ec;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-light:focus-within { border-color: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .14); }
.field-light.has-error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .10); }
.info-box { background: #fdeee3; border: 1px solid #fbd9c2; }

/* ======================================================================
   TABLEAU DE BORD
   ====================================================================== */
.dash-bg { background: radial-gradient(900px 420px at 78% -6%, rgba(249, 115, 22, .10), transparent 70%), var(--bg); }
.sidebar { background: linear-gradient(180deg, #0e0f15 0%, #0b0c11 100%); border-right: 1px solid #1a1c25; }
.nav-link {
  display: flex; align-items: center; gap: .7rem;
  height: 40px; padding: 0 .8rem; border-radius: .75rem;
  font-size: .875rem; font-weight: 600; color: #c4c8d4; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-link i { width: 1.1rem; text-align: center; font-size: .95rem; color: #aab0bf; }
.nav-link:hover { background: #151720; color: #fff; }
.nav-link:hover i { color: #fff; }
.nav-link.active {
  color: #fff;
  background: linear-gradient(100deg, #b4500f 0%, #d9610f 45%, #f26e12 100%);
  box-shadow: 0 12px 26px -14px rgba(249, 115, 22, .8), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.nav-link.active i { color: #fff; }
.nav-badge { border: 1px solid rgba(249, 115, 22, .7); color: #ff8a2a; background: rgba(249, 115, 22, .10); }

.card { background: linear-gradient(180deg, #14161d 0%, #11131a 100%); border: 1px solid var(--line); border-radius: 1.25rem; }
.card-hover { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.card-hover:hover { transform: translateY(-3px); border-color: rgba(249, 115, 22, .45); background: linear-gradient(180deg, #181a22 0%, #13151c 100%); }

.hero-night {
  position: absolute; top: 0; bottom: 0; right: 0; width: 100%;
  background-image: url('../assets/hero-night.jpg');
  background-size: cover;
  background-position: 84% 13%;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
@media (min-width: 1024px) {
  /* la tour se place vers 68 % de la largeur, comme sur la maquette ; l'image deborde a gauche (masquee par le degrade) */
  .hero-night { left: -55%; right: auto; width: 155%; background-position: 50% 15%; }
}
.plan-card {
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(255, 190, 120, .22), transparent 70%),
    linear-gradient(135deg, #b8520f 0%, #d9600f 38%, #8a3f10 100%);
  border: 1px solid rgba(255, 150, 70, .45);
  box-shadow: 0 30px 70px -40px rgba(249, 115, 22, .85), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.plan-tile { background: rgba(60, 22, 6, .38); border: 1px solid rgba(255, 170, 100, .22); }
.plan-tile-icon { background: rgba(255, 140, 50, .28); color: #ffb067; }
.btn-cream { background: linear-gradient(180deg, #ffe0c2, #ffc896); color: #7a2e06; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55); transition: transform .15s ease, filter .15s ease; }
.btn-cream:hover { filter: brightness(1.04); transform: translateY(-1px); }
.progress-track { background: rgba(255, 255, 255, .22); }
.progress-bar { background: linear-gradient(90deg, #ff9a3a, #ff6a0a); box-shadow: 0 0 18px rgba(255, 120, 20, .6); width: 0; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.btn-outline-dark { background: #14161d; border: 1px solid #262a38; color: #e6e8ee; transition: background .15s ease, border-color .15s ease; }
.btn-outline-dark:hover { background: #1a1d26; border-color: rgba(249, 115, 22, .5); }
.tile-icon { background: rgba(249, 115, 22, .12); color: #ff8a2a; }
.pill-green { background: rgba(34, 197, 94, .16); color: #4ade80; }
.promo-card { background: linear-gradient(135deg, rgba(249, 115, 22, .16), rgba(21, 22, 28, .9) 60%); border: 1px solid rgba(249, 115, 22, .35); }
.wifi-card-art { background-image: url('../assets/wifizone-map.png'); background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); mask-image: linear-gradient(90deg, transparent, #000 38%); }

/* barre du haut (menu, notifications, profil) : reste en place quand on defile. Transparente tout en haut (la photo du bandeau passe derriere), puis pleine
   et floutee des qu'on defile, avec un degrade dessous : le contenu qui passe en dessous disparait en douceur au lieu de se voir a travers. */
:root { --a3-topbar-h: 3.75rem; }   /* hauteur reelle mesuree par app3.js */
.a3-hero { padding-top: var(--a3-topbar-h); z-index: 45; }
.a3-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 45; min-height: var(--a3-topbar-h); padding-bottom: .5rem; transition: background-color .18s ease, border-color .18s ease; border-bottom: 1px solid transparent; }
@media (min-width: 1024px) { .a3-topbar { left: 250px; } }
.a3-topbar::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: none; opacity: 0; transition: opacity .18s ease; background: linear-gradient(180deg, rgba(10, 11, 16, .96), rgba(10, 11, 16, 0)); }
.a3-topbar.is-stuck { background: rgba(10, 11, 16, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: #1f2230; }
.a3-topbar.is-stuck::after { opacity: 1; }

/* barre de navigation du bas : l'ecran se comporte comme une application mobile */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
  background: rgba(12, 13, 19, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid #1f2230;
  box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .8);
}
.bn-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  padding: .45rem 0 .3rem; border-radius: .75rem;
  font-size: 10.5px; font-weight: 600; color: #8b90a0; line-height: 1;
  transition: color .15s ease, background .15s ease;
}
.bn-item i { font-size: 1.2rem; }
.bn-item:active { background: rgba(255, 255, 255, .06); }
.bn-item.active { color: #ff8a2a; }
.bn-item.active::before { content: ''; position: absolute; top: -.4rem; width: 26px; height: 3px; border-radius: 9999px; background: linear-gradient(90deg, #ff9a3a, #f05d0b); box-shadow: 0 0 12px rgba(249, 115, 22, .7); }
.bn-item.active i { filter: drop-shadow(0 0 8px rgba(249, 115, 22, .55)); }
@media (max-width: 1023px) {
  body { overscroll-behavior-y: none; -webkit-user-select: none; user-select: none; }
  input, textarea { -webkit-user-select: text; user-select: text; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ======================================================================
   PAGES INTERIEURES (abonnement, factures, equipement, support, profil...)
   ====================================================================== */
.page-hero { background: linear-gradient(180deg, rgba(14, 15, 21, .0), rgba(10, 11, 16, 0)); }
.page-hero .hero-night { opacity: .55; }
.back-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #fff; }
.back-btn:active { background: rgba(255, 255, 255, .1); }

/* champs sombres */
.field-dark { width: 100%; height: 2.9rem; padding: 0 1rem; border-radius: .8rem; background: #0f1017; border: 1px solid #262a38; color: #e8eaf0; font-size: .9rem; transition: border-color .15s ease, box-shadow .15s ease; }
textarea.field-dark { height: auto; padding: .75rem 1rem; resize: vertical; }
.field-dark::placeholder { color: #5f6577; }
.field-dark:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .15); }
.field-dark.has-error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .12); }
select.field-dark { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b90a0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* pastilles d'etat */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .65rem; border-radius: 9999px; font-size: .7rem; font-weight: 700; }
.pill-orange { background: rgba(249, 115, 22, .16); color: #fb923c; }
.pill-red { background: rgba(239, 68, 68, .16); color: #f87171; }
.pill-gray { background: rgba(148, 163, 184, .14); color: #94a3b8; }

/* fenetre / feuille du bas */
.sheet-wrap { position: fixed; inset: 0; z-index: 70; display: none; align-items: flex-end; justify-content: center; }
.sheet-wrap.open { display: flex; }
.sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .65); }
.sheet-panel { position: relative; width: 100%; max-width: 30rem; max-height: 90vh; overflow-y: auto; background: #12141b; border: 1px solid #212330; border-radius: 1.5rem 1.5rem 0 0; padding: 1.4rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); animation: sheetUp .25s ease-out; }
.sheet-panel::before { content: ''; display: block; width: 2.5rem; height: .25rem; margin: -.5rem auto 1rem; border-radius: 9999px; background: #2b2f3d; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 640px) {
  .sheet-wrap { align-items: center; }
  .sheet-panel { border-radius: 1.5rem; padding: 1.6rem; animation: sheetPop .2s ease-out; }
  .sheet-panel::before { display: none; }
  @keyframes sheetPop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* plans */
.plan-option { position: relative; transition: border-color .15s ease, transform .15s ease; }
.plan-option.current { border-color: #f97316; background: linear-gradient(135deg, rgba(249, 115, 22, .14), rgba(18, 20, 27, .9) 60%); }
.plan-option.popular::after { content: 'Populaire'; position: absolute; top: -.6rem; right: 1rem; padding: .1rem .6rem; border-radius: 9999px; background: linear-gradient(135deg, #ff7d1c, #f05d0b); color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: .02em; }

/* exigences du mot de passe */
.req { display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: #8b90a0; transition: color .15s ease; }
.req i { font-size: .95rem; }
.req.ok { color: #4ade80; }

/* test de debit */
.gauge-track { stroke: #1c1e28; }
.gauge-arc { stroke: url(#gaugeGrad); transition: stroke-dashoffset .12s linear; }

/* chat */
.bubble-in { background: #14161d; border: 1px solid #212330; border-radius: 1.1rem 1.1rem 1.1rem .3rem; }
.bubble-out { background: linear-gradient(135deg, #ff7d1c, #f05d0b); color: #fff; border-radius: 1.1rem 1.1rem .3rem 1.1rem; }
.typing span { width: 6px; height: 6px; border-radius: 9999px; background: #6b7080; display: inline-block; animation: bounceDot 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounceDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* code a six chiffres */
.otp-box { width: 100%; aspect-ratio: 1 / 1.2; max-width: none; min-width: 0; padding: 0; text-align: center; font-size: 1.4rem; font-weight: 800; color: #0f1117; background: #fff; border: 1px solid #e5e7ec; border-radius: .8rem; transition: border-color .15s ease, box-shadow .15s ease; }
.otp-box:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .14); }
.otp-box.has-error { border-color: #ef4444; animation: shake .3s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.keypad-key { height: 3.4rem; border-radius: .9rem; background: #f4f5f8; color: #0f1117; font-size: 1.15rem; font-weight: 700; transition: transform .1s ease, background .15s ease; }
.keypad-key:active { transform: scale(.95); background: #e6e8ee; }

/* page entiere sur telephone : contenu au-dessus de la barre du bas */
/* Telephone : la barre du bas est fixe, le contenu doit pouvoir defiler JUSQU'AU-DESSUS d'elle. !important : les classes Tailwind (pb-8) arrivent plus tard dans la page et ecrasaient cette marge,
   si bien que le bas des pages restait cache sous le menu. */
@media (max-width: 1023px) { main.app-main { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)) !important; } }

/* Page Support : la discussion occupe tout l'ecran entre la barre du haut et la barre du bas (le champ de message reste visible, jamais sous le menu) */
body[data-page="support"] main.app-main { padding-top: .5rem; padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)) !important; }
body[data-page="support"] #supportCard { height: calc(100vh - 3.5rem - .5rem - 4.4rem); height: calc(100dvh - 3.5rem - .5rem - 4.4rem - env(safe-area-inset-bottom)); min-height: 340px; }
@media (min-width: 1024px) {
  body[data-page="support"] main.app-main { padding-bottom: 1.5rem !important; }
  body[data-page="support"] #supportCard { height: calc(100vh - 4.5rem - .5rem - 1.5rem); height: calc(100dvh - 4.5rem - .5rem - 1.5rem); }
}

/* filtres et reponses rapides */
.chip { display: inline-flex; align-items: center; padding: .4rem .85rem; border-radius: 9999px; border: 1px solid #2a2e3d; background: transparent; color: #c4c8d4; font-size: .78rem; font-weight: 600; transition: all .15s ease; white-space: nowrap; }
.chip:hover { border-color: rgba(249, 115, 22, .6); color: #fff; }
.chip-active { background: rgba(249, 115, 22, .16); border-color: #f97316; color: #ffb067; }
.skeleton-row { height: 3.5rem; border-radius: 1.25rem; background: linear-gradient(90deg, #14161d, #1b1e28, #14161d); background-size: 200% 100%; animation: skel 1.3s infinite; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ======================================================================
   MAQUETTE TELEPHONE : connexion et code (page blanche, logo centre, bandeau photo)
   ====================================================================== */
.m-banner { position: relative; isolation: isolate; min-height: 78px; background: #0b0b10; }
.m-banner::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('../assets/hero-tower-sign.jpg') 0% 28% / 180% auto no-repeat; }
.m-banner-night::before { background: url('../assets/hero-night.jpg') 72% 20% / 150% auto no-repeat; }
.m-banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 8, 12, .93) 0%, rgba(8, 8, 12, .72) 46%, rgba(8, 8, 12, .06) 100%), linear-gradient(0deg, rgba(240, 93, 11, .28), transparent 38%); }
.otp-card { background: #fff; border: 1px solid #f0f1f4; box-shadow: 0 14px 34px -22px rgba(15, 17, 23, .22); }
@media (max-width: 1023px) {
  .login-right { background: #fff; }
  .login-card { box-shadow: none !important; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: .25rem !important; }
}
/* ======================================================================
   APPLICATION REELLE : paiement des factures, bandeau « a payer », cloche, chat avec Nadège
   ====================================================================== */
.pay-panel { max-width: 32rem; }
.pay-opt { display: flex; width: 100%; align-items: center; gap: .85rem; padding: .85rem .95rem; border-radius: 1rem; border: 1px solid #262a38; background: #14161d; text-align: left; transition: border-color .15s ease, background .15s ease; }
.pay-opt:hover:not([disabled]) { border-color: rgba(249, 115, 22, .6); background: #181a22; }
.pay-opt[disabled] { opacity: .5; cursor: not-allowed; }
.pay-opt .pay-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: .8rem; background: rgba(249, 115, 22, .14); color: #fb923c; font-size: 1.1rem; }
.pay-step { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8b90a0; }
.pay-amount { font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1.1; }
.pay-box { border: 1px solid #262a38; border-radius: 1rem; background: #0f1017; padding: .9rem 1rem; }
.pay-copy { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #fff; }
.pay-copy button { color: #8b90a0; }
.pay-copy button:hover { color: #fff; }

.due-banner { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 1rem; border: 1px solid rgba(249, 115, 22, .4); background: linear-gradient(135deg, rgba(249, 115, 22, .16), rgba(20, 22, 29, .9)); }
.due-banner.overdue { border-color: rgba(239, 68, 68, .5); background: linear-gradient(135deg, rgba(239, 68, 68, .16), rgba(20, 22, 29, .9)); }
.bell-item { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border-radius: .7rem; color: #e6e8ee; font-size: .85rem; }
.bell-item:hover { background: rgba(255, 255, 255, .05); }

.chat-notice { align-self: center; max-width: 90%; text-align: center; font-size: .72rem; color: #8b90a0; padding: .15rem .5rem; }
.bubble-agent { background: rgba(249, 115, 22, .12); border: 1px solid rgba(249, 115, 22, .3); border-radius: 1.1rem 1.1rem 1.1rem .3rem; }
.bubble-nadege { background: rgba(139, 92, 246, .13); border: 1px solid rgba(139, 92, 246, .3); border-radius: 1.1rem 1.1rem 1.1rem .3rem; }