/* ---------------------------------------------------------------------------
 * Composition propre au portail compte (lot 2).
 *
 * Cette feuille N'EST PAS le socle, exactement comme `vitrine.css` n'en est pas
 * un : elle assemble les composants de `charte.css` dans les trois pages du
 * portail — connexion, lien envoyé, compte. Tout ce qui est réutilisable
 * (jetons, `.bouton`, `.etiquette`, `.conteneur`, `.section`, en-tête et pied de
 * page) reste dans la charte et n'est PAS redéfini ici.
 *
 * Ordre de chargement : polices.css → charte.css → compte.css.
 * `vitrine.css` n'est jamais chargée par ces pages : elle ne compose que les
 * sections de l'accueil, dont le portail n'a aucune.
 *
 * ZÉRO RESSOURCE EXTERNE — aucun `@import`, aucun `url()`.
 *
 * AUCUNE VALEUR DE COULEUR EN DUR : chaque teinte passe par un jeton de la
 * charte, dont les ratios de contraste sont déjà relevés (les cinq valeurs de
 * texte passent AA sur les trois fonds). Les seules valeurs littérales de ce
 * fichier sont des géométries — largeurs, épaisseurs, rembourrages.
 *
 * AUCUNE ANIMATION : rien ne bouge dans le portail, il n'y a donc rien à couper
 * sous `prefers-reduced-motion` (le filet générique de la charte reste en place).
 * ------------------------------------------------------------------------- */

/* --- Section du portail ------------------------------------------------------
 * `.portail` accompagne `.section` (padding vertical, filet supérieur) : elle
 * n'en corrige que le filet, inutile juste sous l'en-tête.
 * ------------------------------------------------------------------------- */

.portail {
  border-top: none;
}

/* Colonne étroite des pages de connexion. Toujours un ENFANT de `.conteneur`,
   jamais posée sur le même élément : deux `max-width` sur un même bloc le
   centreraient au lieu de le caler à gauche de la colonne (cf. `charte.css`). */
.portail__colonne {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  max-width: 34rem;
}

/* --- En-tête du portail ------------------------------------------------------
 * L'identité du compte à gauche, la déconnexion à droite ; les deux passent
 * l'une sous l'autre dès que la place manque.
 * ------------------------------------------------------------------------- */

.portail__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espace-5);
  flex-wrap: wrap;
  padding-bottom: var(--espace-6);
  border-bottom: 1px solid var(--filet);
}

.portail__identite {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  min-width: 0;
}

/* L'adresse du compte hérite de `.mono` (famille et taille) ; seule la couleur
   est relevée : c'est une information de premier plan, pas une mention de bas
   de page. `--texte-doux` sur `--fond` : 13,21:1. */
.portail__email {
  color: var(--texte-doux);
  /* Une adresse longue se coupe au lieu d'élargir la page. */
  overflow-wrap: anywhere;
}

/* Le formulaire de déconnexion ne porte qu'un bouton : aucune mise en page à
   lui donner, sinon de l'empêcher de s'étirer. */
.portail__deconnexion {
  flex: none;
}

/* --- Blocs « Mes licences » / « Mes appareils » ----------------------------- */

.portail__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  padding-top: var(--espace-7);
}

.portail__titre {
  font-size: 1.25rem;
}

/* --- Listes de lignes --------------------------------------------------------
 * Une liste, pas un tableau : chaque entrée est un objet (une licence, un
 * appareil) avec ses quelques attributs, pas une cellule à comparer colonne par
 * colonne. Les lignes se réempilent proprement sur mobile, ce qu'un tableau ne
 * fait pas sans artifice.
 * ------------------------------------------------------------------------- */

.liste-licences,
.liste-appareils {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.ligne {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: var(--espace-4) var(--espace-5);
}

.ligne__titre {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  /* Un nom d'appareil arbitraire ne doit pas pousser la ligne hors de l'écran. */
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Mention technique lue en ligne (échéance, dernière activité). Le gabarit la
   compose avec `.mono` de la charte, qui donne la famille et le plancher de
   0,8 rem — comme le fait `.portail__email` ; seule la couleur est relevée.
   `--texte-attenue` sur `--surface` : 6,3:1. La marge automatique la pousse à
   droite, avant l'action. */
.ligne__meta {
  color: var(--texte-attenue);
  margin-left: auto;
}

/* L'action d'une ligne (libérer l'appareil) ferme la rangée. Elle vient APRÈS
   la mention technique, qui garde donc sa marge automatique. */
.ligne__action {
  flex: none;
}

/* Sur les écrans étroits, la ligne devient une pile : la marge automatique de
   la mention technique n'a plus de sens en colonne. */
@media (max-width: 40rem) {
  .ligne {
    align-items: flex-start;
    flex-direction: column;
  }

  .ligne__meta {
    margin-left: 0;
  }
}

/* Étiquette portant un NOM D'APPLICATION. La variante de base de la charte met
   en capitales, ce qui convient à un statut (« PRO », « BÊTA ») mais déforme un
   nom propre : « NOVAWYSP » n'est pas l'écriture de « NovaWysp ». Seule la casse
   est neutralisée — bordure, taille et couleur restent celles de la charte. */
.etiquette--app {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* --- État vide ---------------------------------------------------------------
 * Un compte sans licence ni appareil n'affiche PAS une liste vide : il le dit,
 * et propose une suite. Encadré en pointillé pour se distinguer d'une ligne
 * réelle sans imiter un objet qui n'existe pas.
 * ------------------------------------------------------------------------- */

.etat-vide {
  border: 1px dashed var(--bordure-nette);
  border-radius: var(--rayon);
  padding: var(--espace-5);
  color: var(--texte-secondaire);
  font-size: 0.95rem;
}

.etat-vide a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- Formulaire de connexion ------------------------------------------------ */

.formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  align-items: flex-start;
  margin-top: var(--espace-2);
}

/* Seul `width: 100%` utile de la page : `.formulaire` cale ses enfants à gauche
   (`align-items: flex-start`), le groupe ne s'étirerait donc pas tout seul —
   là où le formulaire lui-même et son champ, tous deux enfants d'une pile
   étirée par défaut, occupent déjà toute la largeur sans rien demander. */
.formulaire__groupe {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  width: 100%;
}

.formulaire__label {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* Taille de police à 1 rem, délibérément : sous 16 px, les navigateurs mobiles
   zooment d'autorité à la prise de focus. Le liseré de focus est celui de la
   charte (`:focus-visible`), jamais supprimé ici. */
.formulaire__champ {
  font-family: var(--police-texte);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure-nette);
  border-radius: var(--rayon);
  padding: 0.7rem 0.9rem;
}

/* --- Liens de retour --------------------------------------------------------- */

.portail__retour {
  display: flex;
  gap: var(--espace-5);
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.portail__retour a {
  color: var(--texte-secondaire);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}