/* Pages "application non installée" (chantier/, metuform/).
   Reprend la charte du portail (index.html). */
@font-face {
  font-family: "Paytone One";
  src: url("fonts/paytone-one-latin.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Zona Pro";
  src: local("Zona Pro"), local("ZonaPro-Regular"), url("fonts/ZonaPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Zona Pro";
  src: local("Zona Pro Bold"), local("ZonaPro-Bold"), url("fonts/ZonaPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --brand-primary: #374b82;
  --brand-secondary: #87c83c;
  --brand-tertiary: #e66900;
  --brand-quaternary: #00b4b4;

  --color-primary: var(--brand-primary);
  --color-primary-contrast: #ffffff;
  --color-focus: var(--brand-tertiary);
  --color-bg: #f3f5f9;
  --color-surface: #ffffff;
  --color-text: #1b2238;
  --color-text-muted: #545d75;
  --color-border: #dde2ec;
  --color-icon-bg: #eef1f7;
  --color-notice-bg: #fff4ea;
  --color-notice-text: #8a3f00;

  --radius: 14px;
  --shadow: 0 1px 2px rgb(27 34 56 / .06), 0 1px 3px rgb(27 34 56 / .08);
  --font-body: "Zona Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: "Paytone One", var(--font-body);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #a9b8e6;
    --color-primary-contrast: #141a2e;
    --color-bg: #10152a;
    --color-surface: #192038;
    --color-text: #e9ecf5;
    --color-text-muted: #a8b0c7;
    --color-border: #2b3453;
    --color-icon-bg: #ffffff;
    --color-notice-bg: #3a2210;
    --color-notice-text: #ffc898;
    --shadow: 0 1px 2px rgb(0 0 0 / .4);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}
/* Bandeau aux 4 couleurs de la marque */
body::before {
  content: "";
  height: 4px;
  background: linear-gradient(90deg,
    var(--brand-tertiary) 0 25%, var(--brand-secondary) 25% 50%,
    var(--brand-quaternary) 50% 75%, var(--brand-primary) 75% 100%);
}

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 2rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
}

.panel {
  width: 100%;
  max-width: 480px;
  padding: 2rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.logo { display: block; height: 32px; width: auto; margin: 0 auto 1.75rem; }
@media (prefers-color-scheme: dark) {
  .logo { padding: 6px 10px; box-sizing: content-box; border-radius: 10px; background: #fff; }
}

.app-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-icon-bg);
  font-size: 3rem;
  line-height: 1;
}
.app-icon img { width: 100%; height: 100%; object-fit: contain; }

h1 {
  margin: 0 0 .25rem;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-primary);
}

.notice {
  display: inline-block;
  margin: .75rem 0 1.25rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: var(--color-notice-bg);
  color: var(--color-notice-text);
  font-size: .875rem;
  font-weight: 700;
}

p { margin: 0 0 1rem; }
.muted { color: var(--color-text-muted); font-size: .9375rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: .5rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 700;
  text-decoration: none;
}

footer {
  padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
  font-size: .8125rem;
  color: var(--color-text-muted);
  text-align: center;
}