/* vues.css — les écrans PHP du site (connexion, abonnement, paiement, espace client, inscription) au design de l'application (08.10.2026). Chargé après orbisia.css, site.css et page.css. */
:root {
  --navy: #071442; --navy-2: #0b1d5c; --ink: #071442; --body: #52658e; --muted: #8a99b8;
  --blue: #0b4dff; --blue-d: #0940d6; --blue-soft: #edf3ff;
  --grey: #f5f8fd; --grey-2: #f5f7fb; --line: #e8edf5;
  --grad: linear-gradient(110deg, #0878f9, #143ff4 44%, #5d35f1 72%, #973dec);
  --font: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sh-sm: 0 1px 2px rgba(9, 22, 56, .05), 0 8px 24px -14px rgba(9, 22, 56, .18);
  --sh: 0 1px 2px rgba(9, 22, 56, .06), 0 18px 40px -20px rgba(20, 48, 105, .3);
  --sh-lg: 0 24px 55px rgba(20, 48, 105, .12);
}
body { background: var(--grey); color: var(--body); font-size: 16px; }
h1, h2, h3, h4 { color: var(--navy); letter-spacing: -.02em; }

/* Boutons de l'application. */
.btn { border-radius: 12px; font-weight: 700; }
.btn.blue, .btn.primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(11, 77, 255, .24); }
.btn.blue:hover, .btn.primary:hover { background: var(--blue-d); }
.btn.ghost { border-color: var(--line); }

/* Cartes blanches du gabarit. */
.card, .auth-card { border: 0; border-radius: 8px; box-shadow: var(--sh-sm); }
.card:hover { border-color: transparent; box-shadow: var(--sh); }
.card .ic { border-radius: 13px; }

/* Pages d'inscription (signup.php) au gabarit : titre à dégradé, espace, mot de passe. */
.acct .card.narrow { max-width: 520px; padding: 34px 34px 28px; border: 0; border-radius: 8px; box-shadow: var(--sh-lg); }
.acct .lab { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.acct h1 { margin: 10px 0 10px; font-size: 1.75rem; line-height: 1.15; font-weight: 800; }
.acct .dg { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acct p { margin: 0 0 12px; font-size: 15px; }
.acct .espace { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0; padding: 14px 16px; border-radius: 10px; background: var(--grey-2); }
.acct .espace span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.acct .espace b { color: var(--navy); font-size: 15px; }
.acct .erreur { padding: 10px 14px; border-radius: 10px; background: #fdecea; color: #c8321f; font-size: 14px; font-weight: 600; }
.acct .form-mdp { display: grid; gap: 12px; margin-top: 8px; }
.acct .champ { display: grid; gap: 6px; }
.acct .champ > span:first-child { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.acct .champ em { font-style: normal; color: #c8321f; }
.acct .saisie { display: flex; align-items: center; height: 46px; padding: 0 13px; border-radius: 11px; background: var(--grey-2); transition: box-shadow .15s, background .15s; }
.acct .saisie input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--navy); font: inherit; font-size: 15px; font-weight: 650; }
.acct .saisie:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px var(--blue-soft); }
.acct .aide-mdp { margin: 0; color: var(--muted); font-size: 13px; }
.acct .card .btn:not(.ghost) { justify-content: center; width: 100%; margin-top: 8px; background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(11, 77, 255, .24); }
.acct .note { border-radius: 10px; }

/* Les anciennes bulles décoratives (marque d'avant) disparaissent. */
.blob { display: none !important; }

/* Le corps des vues : plus de bulles ni de fond gris plein, la page de l'application. */
.vue .auth, .vue .acct { background: transparent !important; min-height: 0; padding: 56px 0 30px; }
.vue main, .vue section { font-family: var(--font); }
.vue .wrap { max-width: 1240px; }
.vue .auth-card { padding: 34px; border-radius: 8px; box-shadow: var(--ombre-haute); }
.vue .auth-card .m { display: none; }
.vue .auth-card h1 { font-size: 1.75rem; font-weight: 800; }
.vue .field label, .vue label.lbl { color: var(--pale); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.vue input[type=email], .vue input[type=password], .vue input[type=text], .vue input[type=tel], .vue select, .vue textarea {
  border: 0 !important; border-radius: 11px !important; background: var(--gris) !important; color: var(--navy); font-family: var(--font); font-weight: 650; }
.vue input:focus, .vue select:focus, .vue textarea:focus { outline: 0; background: #fff !important; box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px var(--blue-50) !important; }
.vue footer { margin-top: 70px; }
.vue .saisie input { background: none !important; box-shadow: none !important; }

/* ══ Connexion centrée et épurée (26.10.2026, variante C choisie) : icône, formulaire seul, essai en second bouton,
   garanties en dessous ; pied de page collé en bas de l'écran sur les pages courtes (pages de compte). ══ */
body.vue { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.vue > footer { margin-top: auto; }
body.vue:has(.auth.cx) { background: #fff; }
.vue .auth.cx { position: relative; isolation: isolate; display: block; padding: 72px 0 96px; }
.vue .auth.cx::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .7;
  background: linear-gradient(#e4e7ee 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, #e4e7ee 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(700px 420px at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(700px 420px at 50% 0%, #000 20%, transparent 75%); }
.cx-cadre { width: 100%; max-width: 420px; margin: 0 auto; }
.vue .cx-cadre .auth-card { max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cx-marque { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 22px; border: 1px solid #e4e7ee; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px -18px rgba(10, 18, 48, .45); }
.cx-marque img { width: 38px; height: 38px; }
.vue .cx-cadre .auth-card h1 { margin: 0 0 8px; color: #0a1230; font-size: 32px; line-height: 1.1; letter-spacing: -.035em; text-align: center; }
.cx-cadre .auth-card .sub { margin: 0 0 32px; color: #5b6580; font-size: 15.5px; line-height: 1.55; text-align: center; }
.cx-cadre .field { margin-bottom: 18px; }
.vue .cx-cadre .field label { display: block; margin-bottom: 8px; color: #0a1230; font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.vue .cx-cadre .field input { width: 100%; height: 50px; padding: 0 15px; border: 1.5px solid #e4e7ee !important; border-radius: 12px !important; background: #fff !important; font-size: 15.5px; font-weight: 600; transition: border-color 150ms ease, box-shadow 150ms ease; }
.vue .cx-cadre .field input:focus { border-color: #0b4dff !important; box-shadow: 0 0 0 4px rgba(11, 77, 255, .12) !important; }
.cx-cadre .auth-row { margin: 4px 0 24px; color: #5b6580; font-size: 14px; }
.cx-cadre .auth-row .rem { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cx-cadre .auth-row input[type=checkbox] { width: 17px; height: 17px; accent-color: #0b4dff; }
.cx-cadre .link { color: #0b4dff; font-weight: 700; text-decoration: none; }
.cx-cadre .link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cx-cadre .btn.blue { height: 52px; border-radius: 12px; font-size: 16px; font-weight: 800; box-shadow: 0 12px 26px -12px rgba(11, 77, 255, .75); }
.cx-cadre .auth-alt { display: grid; gap: 14px; margin: 22px 0 0; color: #5b6580; font-size: 14.5px; text-align: center; }
.cx-cadre .auth-alt > .link { justify-self: center; }
.cx-ou { display: flex; align-items: center; gap: 14px; color: #9aa3b8; font-size: 13px; }
.cx-ou::before, .cx-ou::after { content: ""; flex: 1; height: 1px; background: #e4e7ee; }
.cx-essai { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 12px; background: #fff; color: #0a1230; font-weight: 800; text-decoration: none; box-shadow: inset 0 0 0 1.5px #e4e7ee; transition: box-shadow 150ms ease, color 150ms ease; }
.cx-essai:hover { color: #0b4dff; box-shadow: inset 0 0 0 1.5px #0b4dff; }
.cx-garanties { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 44px 0 0; padding: 0; list-style: none; color: #5b6580; font-size: 13px; font-weight: 600; }
.cx-garanties li { display: inline-flex; align-items: center; gap: 7px; }
.cx-garanties svg { width: 15px; height: 15px; color: #ff6a13; }
@media (max-width: 860px) { .vue .auth.cx { padding: 44px 0 64px; } }

/* ══ Barre de portail de l'espace client (26.10.2026, version B) : logo, « Espace client », nom, se déconnecter ; toujours blanche ══ */
.barre.ec-barre { padding: 0 max(16px, calc((100% - 1040px) / 2)); background: #fff; box-shadow: 0 1px 0 #e4e7ee; -webkit-backdrop-filter: none; backdrop-filter: none; }
.barre.ec-barre .pt-sep { width: 1px; height: 24px; margin: 0 4px 0 14px; background: #e4e7ee; }
.barre.ec-barre .pt-tit { color: #5b6580; font-size: 15px; font-weight: 700; }
.barre.ec-barre .droite { gap: 12px; }
.barre.ec-barre .pt-nom { color: #0a1230; font-size: 14px; font-weight: 700; }
.barre.ec-barre .pt-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0a1230; color: #fff; font-size: 14px; font-weight: 800; }
@media (max-width: 640px) { .barre.ec-barre .pt-sep, .barre.ec-barre .pt-tit, .barre.ec-barre .pt-nom { display: none; } .barre.ec-barre .pt-sortie { display: inline-flex; } }

/* Bouton ≡ de la barre de portail (26.10.2026) : sur téléphone, il remplace « Se déconnecter » et ouvre les rubriques de l'espace client. */
.barre.ec-barre .pt-burger { display: none; }
@media (max-width: 760px) {
  .barre.ec-barre .pt-sortie { display: none; }
  .barre.ec-barre .pt-burger { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: #f4f5f7; color: #0a1230; cursor: pointer; }
  .barre.ec-barre .pt-burger .ic { width: 20px; height: 20px; }
  .barre.ec-barre .pt-burger .pt-fermer, html.ec-menu-ouvert .barre.ec-barre .pt-burger .pt-ouvrir { display: none; }
  html.ec-menu-ouvert .barre.ec-barre .pt-burger .pt-fermer { display: block; }
}
@media (max-width: 640px) { .ec-ob { top: 62px !important; } }