/* ════════════════════════════════════════════════════════════════════════
   ORION NOTE — Écrans de connexion DANS LE LOGICIEL Windows.

   La même page sert le navigateur et le logiciel. Dans le navigateur, elle
   est une carte posée au centre d'une grande page ; dans le logiciel, elle
   s'affiche dans la fenêtre du panneau : 340 px de large, SANS CADRE.

   Deux manques en découlaient, invisibles sur le Web :
     • aucun bouton pour fermer ou réduire — une fenêtre sans cadre n'en a
       pas, et tant qu'on n'est pas connecté il n'y a pas de panneau pour en
       fournir : la fenêtre ne se refermait que par l'icône de la zone de
       notification ;
     • aucune zone de glissement : la fenêtre était CLOUÉE à l'écran.

   Tout ici est sous `html.dans-app`, classe posée par fenetre-app.js quand
   la page tourne dans le logiciel. Le navigateur ne voit donc rien de ces
   règles, et garde sa carte centrée.
   ════════════════════════════════════════════════════════════════════════ */

/* Masqués par défaut : ces éléments n'existent que pour le logiciel. */
.app-barre,
.app-logo,
.app-pied { display: none; }

html.dans-app,
html.dans-app body {
  height: 100%;
  min-height: 0;          /* annule le min-height:100dvh de la version web */
}

html.dans-app body {
  display: flex;
  flex-direction: column;
  /* ⚠️ La version web centre son contenu (`place-items: center`). En colonne
     flex, ce centrage RÉTRÉCIT chaque bloc à la largeur de son contenu : la
     barre de fenêtre flottait au milieu au lieu de border la fenêtre. */
  align-items: stretch;
  margin: 0;
  padding: 0;
  background: #fff;
  /* Même silhouette que le panneau : la fenêtre est sans cadre, c'est la
     page qui dessine ses bords. */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
}

/* ════════ Barre de fenêtre ════════ */
html.dans-app .app-barre {
  -webkit-app-region: drag;         /* ← ce qui rend la fenêtre déplaçable */
  display: flex; align-items: center; justify-content: space-between;
  flex: none; gap: 8px; padding: 5px 5px 5px 11px;
  background: rgba(0,0,0,.035);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
/* Sans ça, toute la barre serait une poignée et les boutons inertes. */
html.dans-app .app-barre button { -webkit-app-region: no-drag; }

html.dans-app .app-marque {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: rgba(0,0,0,.55);
}
html.dans-app .app-marque img { width: 15px; height: 15px; border-radius: 4px; }

html.dans-app .app-fenetre { display: flex; gap: 2px; }
/* Boutons plats, comme ceux du panneau et des post-it. */
html.dans-app .app-ctrl {
  width: 32px; height: 26px; flex: none; border: 0; border-radius: 5px;
  background: transparent; color: rgba(0,0,0,.55);
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
}
html.dans-app .app-ctrl:hover { background: rgba(0,0,0,.07); color: rgba(0,0,0,.85); }
/* Rouge au survol du ✕ : la convention Windows, connue sans l'apprendre. */
html.dans-app #app-fermer:hover { background: #e81123; color: #fff; }

/* ════════ Contenu ════════ */
html.dans-app .carte {
  /* La FENÊTRE est la carte : plus d'ombre ni de bords à l'intérieur.
     Espacement resserré : dans 340 × 520, l'aération de la version web
     poussait le formulaire hors de la fenêtre et faisait apparaître une
     barre de défilement dès l'ouverture. */
  flex: 1; min-height: 0; overflow-y: auto;
  width: auto; max-width: none;
  margin: 0; padding: 16px 22px 14px;
  background: radial-gradient(120% 60% at 50% 0%, #f1ecff 0%, #fff 62%);
  border-radius: 0; box-shadow: none;
}
/* Barre de défilement fondue, comme dans l'app (cette page n'a pas app.css). */
html.dans-app ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dans-app ::-webkit-scrollbar-track { background: transparent; }
html.dans-app ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.16); background-clip: padding-box;
  border: 2px solid transparent; border-radius: 10px;
}
html.dans-app ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.28); }

html.dans-app .logo { display: none; }     /* l'émoji 🪐 cède la place à l'icône */
html.dans-app .app-logo {
  display: block; width: 42px; height: 42px; margin: 0 auto 8px;
  border-radius: 12px; box-shadow: 0 4px 14px rgba(30,27,75,.22);
}

html.dans-app h1   { font-size: 19px; margin: 0 0 2px; text-align: center; }
html.dans-app .sous { margin: 0 0 16px; font-size: 12px; text-align: center; }

html.dans-app label { margin-bottom: 10px; }
html.dans-app .souvenir { margin-bottom: 8px; font-size: 12px; }
html.dans-app input:not([type="checkbox"]) { padding: 9px 12px; font-size: 14px; }
html.dans-app button[type="submit"] { margin-top: 2px; padding: 11px; font-size: 14px; }

/* Message d'invitation : une note de bas de page, pas un encadré de couleur.
   Dans 340 px, un bloc bleu pèse autant que le formulaire lui-même. */
html.dans-app .info {
  margin: 12px 0 0; padding: 10px 0 0;
  background: none; color: #6b7280; font-size: 11px; text-align: center;
  border-top: 1px solid rgba(0,0,0,.07);
}
html.dans-app .avis { font-size: 11px; }
html.dans-app .pied { display: none; }     /* remplacé par la version, en bas */

/* ════════ Pied : version du logiciel ════════ */
html.dans-app .app-pied {
  display: block; flex: none;
  padding: 7px 12px 9px;
  border-top: 1px solid rgba(0,0,0,.06);
  color: #9ca3af; font-size: 11px; text-align: center;
}

/* Fenêtre réduite par l'utilisateur : le formulaire prime sur le décor. */
@media (max-height: 460px) {
  html.dans-app .app-logo { width: 34px; height: 34px; margin-bottom: 6px; }
  html.dans-app .sous { margin-bottom: 14px; }
  html.dans-app .info { display: none; }
}