/* ============================================================
   BUREAU DE BEAUFORT — SHELL DE L'APP (css/app.css)
   ------------------------------------------------------------
   Styles SPÉCIFIQUES à app.html : écran d'authentification
   (carte centrée, onglets connexion/inscription, état d'attente)
   + quelques ajustements du shell (badge compte, pied de sidebar)
   non couverts par theme.css. Tout en var(--...) (palette Bleu
   Plume chargée depuis config/theme.json par js/config.js).
   ============================================================ */

/* ===== ÉCRAN AUTH — carte centrée plein écran ===== */
.ecran-auth{
  width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 20px; background:var(--papier);
}
.carte-auth{
  width:100%; max-width:400px; padding:36px 32px; text-align:center;
}
/* Le nom n'est plus recomposé en Fraunces : on affiche le fichier du kit
   (verrouillage vertical, tracés vectorisés) tel quel. Aucun padding ajouté :
   la zone de protection est déjà dans le SVG. */
.logo-auth{margin-bottom:14px}
.logo-auth img{display:block; width:132px; height:auto; margin:0 auto}
.accroche-auth{margin:0 auto 26px; text-align:center; max-width:none}

/* Onglets Connexion / Créer un compte (pilule à 2 boutons) */
.onglets-auth{
  display:flex; background:var(--papier-2); border-radius:999px; padding:4px; margin-bottom:22px;
}
.onglets-auth button{
  flex:1; border:none; background:none; padding:9px 14px; font-size:.86rem; font-weight:600;
  color:var(--encre-doux); border-radius:999px; transition:.15s;
}
.onglets-auth button.actif{background:var(--blanc-carte); color:var(--accent-fonce); box-shadow:var(--ombre)}

/* Formulaire (réutilise .champ/.lib/input de theme.css) */
#form-auth{display:flex; flex-direction:column; gap:16px; text-align:left}
#form-auth .champ{margin:0}

.btn-auth{width:100%; margin-top:4px}

.erreur-auth{
  background:#F7E4E1; color:var(--cire); border-radius:var(--rayon-ctrl);
  padding:10px 14px; font-size:.84rem; text-align:left; margin:0;
}

.bascule-auth-texte{
  margin-top:20px; font-size:.86rem; color:var(--encre-doux); text-align:center;
}
.lien-auth{
  background:none; border:none; color:var(--accent-fonce); font-weight:600; font-size:.86rem;
  padding:0; text-decoration:underline; cursor:pointer;
}

/* État « compte en attente / refusé » */
.attente-icone{font-size:2.4rem; margin:6px 0 14px}
.attente-titre{font-size:1.2rem; margin-bottom:12px}
.attente-texte{margin:0 auto 26px; text-align:center; max-width:none}
.attente-actions{display:flex; flex-direction:column; gap:10px}

/* ===== SHELL APP — ajustements non couverts par theme.css ===== */

/* #ecran-app est le vrai conteneur flex (rangée aside|main) : dans
   app.html, aside+main sont enfants de #ecran-app, pas de body
   directement (body ne contient que #ecran-auth et #ecran-app).
   Sans ce bloc, le display:flex de body ne s'applique qu'à ces 2
   div empilées → la sidebar tombe au-dessus du contenu. */
#ecran-app{
  display:flex; min-height:100vh; width:100%;
}

/* ----- Logo de la barre latérale (kit d'identité, session 102) -----------
   theme.css est NO-TOUCH : ses règles typographiques de .logo (Fraunces,
   1.16rem) sont devenues inertes — il n'y a plus de texte — et sa règle
   « .logo .long{display:none} » du média ≤1020px continue de faire le
   travail. On ne fait ici que dimensionner les deux images.

   ⚠️ Au passage, un défaut ancien est corrigé : le .court portait un
   style="display:none" EN LIGNE, que la feuille de style ne pouvait pas
   battre → une fois la barre repliée, elle n'affichait plus AUCUNE marque.
   Le display est maintenant piloté par le CSS des deux côtés. */
.logo img{display:block; height:auto}
.logo .long{width:196px}          /* min. 180 px du kit — barre de 244 px */
.logo .court{display:none; width:28px}   /* monogramme, min. 16 px */

/* Pied de sidebar : email connecté + bouton déconnexion (au lieu du
   texte "plan" statique de la maquette). */
.pied-menu #pied-email-client{
  word-break:break-all;
}
.lien-deconnexion{
  display:inline-block; margin-top:6px; background:none; border:none; padding:0;
  color:var(--accent-fonce); font-size:.78rem; font-weight:600; text-decoration:underline; cursor:pointer;
}

/* Badge email connecté dans l'entête (remplace .bandeau-demo de la maquette) */
.badge-compte{
  font-size:.78rem; color:var(--encre-doux); background:var(--papier-2);
  padding:6px 14px; border-radius:999px; max-width:52vw; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

@media (max-width:1020px){
  .carte-auth{max-width:92vw}
  /* Barre repliée à 68 px : le padding 24/22 de theme.css ne laisserait que
     24 px utiles pour un monogramme de 28 px. On centre sans marge latérale. */
  .logo{padding:20px 0; display:flex; justify-content:center}
  .logo .court{display:block}
}