/* ConnecteMe — page d'accueil « / » (connexion, création de carte, installation de l'app).
 * Page autonome : ni Bootstrap ni Argon. Jetons repris de static/styles/app-v2.css.
 * Maquette de référence : prototypes/accueil/accueil.html. */
:root{
  --brand:#627EFF;            /* accents, icônes, cadre de scan (non textuel) */
  --brand-strong:#4B5FE2;     /* boutons pleins : texte blanc 5,2:1 */
  --brand-ink:#2A3470;        /* liens et texte de marque : 11:1 */
  --brand-tint:#EEF1FF;
  --brand-wash:#F6F7FF;
  --text:#1A1C24;--muted:#5F6372;--line:#ECEEF3;--line-strong:#DADDE6;
  --alert:#B3261E;--alert-tint:#FDECEA;--live:#1B7F43;--live-tint:#E7F6EC;
  --warn:#8A5A00;--warn-tint:#FFF4DC;
  --font-display:"Lato",system-ui,sans-serif;
  --font-text:"Source Sans 3",system-ui,sans-serif;
  --radius:12px;--radius-lg:20px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;color:var(--text);font:400 16px/1.5 var(--font-text);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 60% at 0% 0%,#E9EDFF 0%,transparent 60%),
    radial-gradient(90% 50% at 100% 0%,#F1EEFF 0%,transparent 55%),
    #FBFBFE;
}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:var(--brand-ink)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--text);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{left:16px}
svg.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Coquille ── */
.top{max-width:1120px;margin:0 auto;padding:calc(14px + var(--safe-t)) 16px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font:900 18px/1 var(--font-display);letter-spacing:-.01em;min-height:44px}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 1px 0 rgba(16,18,26,.04),0 2px 8px -2px rgba(75,95,226,.35)}
.top-link{display:none;font:700 15px var(--font-display);color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:10px}
.top-link:hover{color:var(--text);background:var(--brand-wash)}

main{max-width:1120px;margin:0 auto;padding:8px 16px calc(24px + var(--safe-b))}
.layout{display:grid;gap:20px}

/* ── Accroche ── */
.pitch h1{font-weight:900;font-size:clamp(1.65rem,7vw,3.1rem);line-height:1.08;letter-spacing:-.025em;margin-top:14px;max-width:16ch}
.pitch h1 em{font-style:normal;color:var(--brand-strong)}
.pitch .sub{margin-top:8px;color:var(--muted);font-size:17px;max-width:34rem}
.reass{display:none;list-style:none;margin:22px 0 0;padding:0;gap:8px 20px;flex-wrap:wrap;color:var(--muted);font-size:16px}
.reass li{display:flex;align-items:center;gap:8px}
.reass svg{color:var(--live)}
.visual{display:none}

/* ── Panneau d'accès ── */
.panel{display:grid;gap:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 18px;box-shadow:0 1px 2px rgba(16,18,26,.04),0 12px 32px -18px rgba(42,52,112,.28)}
.card h2{font-size:20px;font-weight:900}
.card .lede{color:var(--muted);font-size:15px;margin-top:2px}

/* Messages Django hors erreur de connexion (succès, information, avertissement) */
.notes{display:grid;gap:8px}
.note-msg{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);font-size:15px;line-height:1.4;background:var(--brand-tint);color:var(--brand-ink)}
.note-msg svg{margin-top:2px}
.note-msg.success{background:var(--live-tint);color:#14552F}
.note-msg.warning{background:var(--warn-tint);color:var(--warn)}
.note-msg.error{background:var(--alert-tint);color:#7A1A14}

/* Formulaire */
form.login{margin-top:16px;display:grid;gap:14px}
.field{display:grid;gap:6px}
.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
label{font:700 15px/1.2 var(--font-display);color:var(--text)}
.forgot{font:600 15px var(--font-text);color:var(--brand-ink);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--brand) 55%,transparent)}
.input{position:relative}
.input input{width:100%;height:52px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--radius);background:#fff;font-size:17px;transition:border-color .15s,box-shadow .15s}
.input input::placeholder{color:#8A8E9C}
.input input:hover{border-color:#C5C9D6}
.input input:focus{outline:none;border-color:var(--brand-strong);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}
.input input[aria-invalid=true]{border-color:var(--alert)}
.input input[aria-invalid=true]:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--alert) 18%,transparent)}
.input.pw input{padding-right:56px}
.reveal{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;background:none;border-radius:10px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.reveal:hover{color:var(--text);background:var(--brand-wash)}
.reveal[aria-pressed=true]{color:var(--brand-ink)}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);background:var(--alert-tint);color:#7A1A14;font-size:15px;line-height:1.4}
.alert svg{color:var(--alert);margin-top:1px}
.alert b{display:block;font-family:var(--font-display)}
.alert button{font:inherit;font-weight:700;color:#7A1A14;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--radius);border:1.5px solid transparent;font:700 17px/1 var(--font-display);text-decoration:none;cursor:pointer;transition:background-color .16s,border-color .16s,transform .14s var(--ease-out),box-shadow .2s}
.btn:active{transform:scale(.98)}
.btn-primary{width:100%;background:var(--brand-strong);color:#fff;box-shadow:0 8px 20px -10px rgba(75,95,226,.8)}
.btn-primary:hover{background:#3E50C7}
.btn-primary[aria-busy=true]{pointer-events:none;opacity:.85}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite;display:none}
.btn[aria-busy=true] .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Créer sa carte */
.create{display:grid;gap:12px;background:var(--brand-tint);border-color:transparent;box-shadow:none}
.create .row{display:flex;gap:14px;align-items:center}
.create .badge{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--brand-strong)}
.create h2{font-size:18px}
.btn-soft{width:100%;background:#fff;color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 30%,#fff)}
.btn-soft:hover{border-color:var(--brand)}
.pro{font-size:15px;color:var(--muted);text-align:center}
.pro a{font-weight:700}

/* Installer l'app */
.install{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:14px 12px 14px 14px;position:relative}
.install[hidden]{display:none}
.install img{width:48px;height:48px;border-radius:12px;grid-row:span 2;box-shadow:0 2px 10px -3px rgba(42,52,112,.35)}
.install h2{font-size:16px;font-weight:900;padding-right:28px}
.install p{grid-column:2;color:var(--muted);font-size:14px;line-height:1.35}
.install .go{grid-column:1/-1;margin-top:8px;min-height:46px;width:100%;background:var(--text);color:#fff;font-size:16px}
.install .go:hover{background:#000}
.install .x{position:absolute;top:6px;right:6px;width:40px;height:40px;border:0;background:none;border-radius:10px;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.install .x:hover{background:var(--brand-wash);color:var(--text)}
.desk-hint{font-size:14px;color:var(--muted);text-align:center;display:none}
.desk-hint[hidden]{display:none!important}

footer{max-width:1120px;margin:0 auto;padding:4px 16px calc(20px + var(--safe-b));display:flex;justify-content:center;gap:18px;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}

/* Feuilles d'installation (templates/entreprise/_pwa_sheets.html) sans Bootstrap :
   scripts/pwa.js les ouvre avec la classe .show (mêmes règles que app-v2.css). */
.pwa-sheet.offcanvas{position:fixed;z-index:90;visibility:hidden;transform:translateY(105%);transition:transform .32s var(--ease-out),visibility 0s .32s;display:block}
.pwa-sheet.offcanvas.show{visibility:visible;transform:none;transition:transform .32s var(--ease-out)}
.pwa-scrim{position:fixed;inset:0;z-index:89;background:rgba(16,18,26,.45);opacity:0;pointer-events:none;transition:opacity .2s}
.pwa-scrim.show{opacity:1;pointer-events:auto}

/* Mot de passe oublié (dialog natif) */
dialog{border:0;border-radius:var(--radius-lg);padding:22px 20px;width:min(440px,calc(100% - 32px));box-shadow:0 24px 60px -20px rgba(16,18,26,.5)}
dialog::backdrop{background:rgba(16,18,26,.45)}
dialog h2{font-size:20px;font-weight:900}
dialog p{color:var(--muted);font-size:15px;margin-top:4px}
dialog form{display:grid;gap:12px;margin-top:16px}
.dlg-actions{display:flex;gap:8px;flex-direction:column}
.btn-ghost{background:none;color:var(--muted);min-height:44px}

/* Mode installé : l'app s'ouvre directement sur la connexion */
.pwa-standalone .install,.pwa-standalone .desk-hint,.pwa-standalone .top-link{display:none!important}
.pwa-standalone .pitch .sub-web{display:none}
.pitch .sub-app{display:none}
.pwa-standalone .pitch .sub-app{display:block}

/* ── PC ── */
@media (min-width:960px){
  .top{padding-top:22px}
  .top-link{display:inline-block}
  main{padding-top:24px}
  .layout{grid-template-columns:1.1fr minmax(380px,420px);gap:56px;align-items:start}
  .pitch{padding-top:28px}
  .reass{display:flex}
  .visual{display:block;margin-top:40px;position:relative;width:440px;height:250px}
  .panel{position:sticky;top:24px}
  .card{padding:26px 24px}
  .desk-hint{display:block}
}
/* Carte de démonstration dans le viseur (PC) */
.viseur{position:absolute;inset:0}
.viseur i{position:absolute;width:44px;height:44px;border:5px solid var(--brand);opacity:.85}
.viseur i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:18px}
.viseur i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-top-right-radius:18px}
.viseur i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-bottom-left-radius:18px}
.viseur i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:18px}
.mini{position:absolute;inset:26px;background:#fff;border-radius:18px;box-shadow:0 18px 40px -22px rgba(42,52,112,.45);display:grid;grid-template-columns:1fr auto;gap:12px;padding:20px;align-items:center}
.mini .who b{display:block;font:900 20px/1.15 var(--font-display)}
.mini .who span{color:var(--muted);font-size:15px}
.mini .who .chip{display:inline-flex;white-space:nowrap;margin-top:12px;padding:4px 10px;border-radius:999px;background:var(--live-tint);color:var(--live);font-size:13px;font-weight:700}
.mini svg{width:96px;height:96px}


/* ── Identité de marque : vrai logo + bannière par défaut des cartes (images/banniere-motif.webp),
   la même que la carte publique affiche quand une carte n'a pas de bannière. ── */
.brand .logo{display:block;height:32px;width:auto;border-radius:0;box-shadow:none}
.layout{gap:0}
.pitch{position:relative;overflow:hidden;border-radius:28px;padding:26px 22px 88px;margin-top:6px;
  background:#F1F3F7 url(../images/banniere-motif.webp) center/cover;
  box-shadow:0 1px 0 #fff inset,0 30px 60px -36px rgba(38,47,110,.45)}
/* Le panneau d'accès chevauche la bannière : effet de profondeur */
.panel{position:relative;z-index:1;margin-top:-64px;padding:0 6px}
.card{box-shadow:0 1px 2px rgba(16,18,26,.05),0 28px 50px -26px rgba(38,47,110,.45)}
.create{background:#fff;border:1px solid var(--line)}
.create .badge{background:var(--brand-tint)}
.mini{color:var(--text);box-shadow:0 30px 50px -24px rgba(42,52,112,.45)}

@media (min-width:960px){
  .brand .logo{height:38px}
  .layout{gap:48px;align-items:center}
  .pitch{padding:56px 52px 60px;margin-top:0;min-height:600px;display:flex;flex-direction:column;justify-content:center}
  .panel{margin-top:0;padding:0}
  .visual{margin-top:48px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}