/* Pages de connexion « Avrelios for <entreprise> » : la page de connexion du panel
   (panel/static/style.css, bloc Login), recopiée seule. Aucun outil derrière. */
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-var.woff2") format("woff2");
             font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Cond"; src: url("fonts/plex-cond-700.woff2") format("woff2");
             font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Avrelios"; src: url("fonts/manrope-latin.woff2") format("woff2");
             font-weight: 800; font-style: normal; font-display: swap; }

:root { --papier: #F8F7F3; --encre: #191B18; --muted: #686A63; --orange: #F26643;
        --orange-t: #A8401F; --champ: #C4C5BC; --radius: 4px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center;
       font: 15px/1.45 "Plex Sans", system-ui, sans-serif; background: var(--papier); color: var(--encre); }
body::before { content: ""; position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(circle at 84% 62%, var(--orange) 0%,
              rgb(242 102 67 / 45%) 22%, rgb(242 102 67 / 0%) 52%); }

.carte { position: relative; z-index: 1; background: #fff; border-radius: var(--radius);
         padding: 34px 34px 26px; width: min(380px, 92vw); text-align: center;
         box-shadow: 0 20px 50px rgb(25 27 24 / 14%); }
.marque { display: flex; justify-content: center; }
.brand { display: flex; align-items: center; gap: 9px; text-align: left;
         font: 800 23px/1.05 "Avrelios", "Plex Sans", sans-serif; letter-spacing: -0.06em; }
.brand small { display: block; font: 600 11px/1.3 "Plex Cond", sans-serif; color: var(--muted);
               text-transform: uppercase; letter-spacing: 0.14em; }
.logo { width: 22px; height: 24px; flex-shrink: 0; fill: currentColor; }
h1 { font: 700 28px/1.02 "Plex Cond", "Plex Sans", sans-serif; text-transform: uppercase;
     letter-spacing: -0.005em; margin: 14px 0 22px; }

form { text-align: left; }
.stack { margin-bottom: 14px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
input { width: 100%; border: 1px solid var(--champ); border-radius: var(--radius); padding: 8px 11px;
        font: inherit; font-size: 14px; background: #fff; color: var(--encre); }
button { width: 100%; border: 1px solid var(--orange); border-radius: var(--radius); padding: 8px 15px;
         background: var(--orange); color: var(--encre); font: 700 14px "Plex Cond", "Plex Sans", sans-serif;
         cursor: pointer; transition: background .12s; }
button:hover { background: #FF815E; border-color: #FF815E; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--orange-t); outline-offset: 1px; }

.flash { border-radius: var(--radius); padding: 11px 15px; margin: 0 0 16px; font-size: 14px;
         font-weight: 500; text-align: left; background: #EEEDE6; color: #363A33; border: 1px solid #DEDDD4; }