/* ==========================================================================
   Window Portal Network — le portail d'administration

   Vient PAR-DESSUS espaces.css, dont il reprend les champs, les boutons et
   les messages. Ici ne vivent que la mise en page à deux colonnes et les
   tableaux.

   ⚠️ NE PAS CONFONDRE AVEC `portail.css`, qui habille `admin.html` : celui-là
   est la DÉMONSTRATION du produit vendu aux clients — le faux « Bar Aurora »
   qu'un prospect essaie depuis la page d'accueil. Le fichier présent habille
   le VRAI portail de Karl. Deux choses différentes, deux fichiers.

   Le violet est la couleur du module Portal, et ce portail-ci est le portail
   des portails : la barre latérale la porte en aplat. Le reste est
   volontairement plat et calme — on l'ouvre pour faire quelque chose, pas
   pour l'admirer.
   ========================================================================== */

.portail {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- La barre latérale --------------------------------------------------- */

.cote {
  background: var(--wpn-violet-800);
  /* Le fond est sombre : la couleur du texte est déclarée explicitement,
     sinon les enfants héritent du clair et disparaissent. */
  color: var(--wpn-violet-100);
  padding: var(--espace-6) var(--espace-4);
  display: flex; flex-direction: column; gap: var(--espace-8);
  position: sticky; top: 0; height: 100vh; height: 100dvh;
}

.cote .logo-lien { color: var(--wpn-blanc); }
.cote .logo-wpn { width: 40px; height: auto; }
.cote .logo-lien span { color: var(--wpn-blanc); }

.cote-onglets { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cote-onglets button {
  text-align: left; border: 0; background: none; cursor: pointer;
  padding: 10px 12px; border-radius: var(--rayon-md);
  font-family: var(--police-texte); font-size: var(--texte-sm);
  font-weight: var(--graisse-moyenne); color: var(--wpn-violet-100);
}
.cote-onglets button:hover { background: rgba(255, 255, 255, .1); color: var(--wpn-blanc); }
.cote-onglets button[aria-selected="true"] {
  background: var(--wpn-blanc); color: var(--wpn-violet-800);
  font-weight: var(--graisse-grasse);
}

.cote-pied {
  display: flex; flex-direction: column; gap: var(--espace-3);
  font-size: var(--texte-sm);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: var(--espace-4);
}
.cote-pied a { color: var(--wpn-violet-100); text-decoration: none; }
.cote-pied a:hover { color: var(--wpn-blanc); text-decoration: underline; }
.cote-qui { font-size: var(--texte-xs); color: var(--wpn-violet-200); line-height: 1.4; }
.cote-qui b { display: block; color: var(--wpn-blanc); font-size: var(--texte-sm); }

.btn-sortir {
  border: 1px solid rgba(255, 255, 255, .28); background: none;
  color: var(--wpn-blanc); cursor: pointer;
  padding: 8px 12px; border-radius: var(--rayon-md);
  font-family: var(--police-texte); font-size: var(--texte-sm);
}
.btn-sortir:hover { background: rgba(255, 255, 255, .12); }

/* --- Le corps ------------------------------------------------------------- */

.principal { padding: var(--espace-8) var(--espace-8) var(--espace-24); min-width: 0; }

.barre {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--espace-6); flex-wrap: wrap;
  margin-bottom: var(--espace-8);
}
.barre h1 {
  font-family: var(--police-titre); font-weight: var(--graisse-noire);
  font-size: var(--texte-2xl); letter-spacing: -.02em; margin: 0 0 var(--espace-1);
}
.barre-sous { color: var(--wpn-neutre-400); font-size: var(--texte-sm); margin: 0; max-width: 60ch; }

.btn-ajouter {
  border: 0; border-radius: var(--rayon-md); cursor: pointer;
  background: var(--wpn-violet-800); color: var(--wpn-blanc);
  padding: 11px 18px;
  font-family: var(--police-texte); font-size: var(--texte-sm);
  font-weight: var(--graisse-grasse); white-space: nowrap;
}
.btn-ajouter:hover { background: var(--wpn-violet-700); }

/* --- Les tableaux ---------------------------------------------------------- */

/* Un tableau qui déborde emmène toute la page avec lui et fait défiler le
   document de côté. Il défile donc DANS son propre cadre. */
.cadre-tableau {
  overflow-x: auto;
  background: var(--wpn-blanc);
  border: 1px solid var(--wpn-neutre-100);
  border-radius: var(--rayon-lg);
}

table { width: 100%; border-collapse: collapse; font-size: var(--texte-sm); }
thead th {
  text-align: left; padding: 12px var(--espace-4);
  font-size: var(--texte-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--wpn-neutre-400); font-weight: var(--graisse-grasse);
  border-bottom: 1px solid var(--wpn-neutre-100); white-space: nowrap;
}
tbody td {
  padding: 14px var(--espace-4);
  border-bottom: 1px solid var(--wpn-neutre-50);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--wpn-neutre-50); }
td b { display: block; }
/* Chaque `<small>` prend sa propre ligne. Sans ce `block`, ils s'écrivaient à
   la suite les uns des autres et donnaient « ana@local.testPortugues » — un
   défaut invisible à la lecture du code, trouvé en regardant l'écran. */
td small { display: block; color: var(--wpn-neutre-400); font-size: var(--texte-xs); }

/* Les actions s'empilent sur plusieurs rangées plutôt que de sortir du cadre.
   Une ligne de compte porte jusqu'à cinq boutons — modifier, renvoyer le lien,
   déconnecter, suspendre, supprimer — et sur un écran de portable ils étaient
   coupés à droite : il fallait faire défiler le tableau pour atteindre la
   suppression. Ils reviennent maintenant à la ligne, alignés à droite. */
.cellule-actions {
  text-align: right;
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--espace-2);
}
.cellule-actions button { white-space: nowrap; }

/* La mention d'expiration sous une pastille « Invité » ne se coupe pas mot à
   mot : sans cette largeur minimale, « Lien valide jusqu'au 5 sept. » tombait
   sur six lignes et triplait la hauteur de la rangée. */
.etat + small { white-space: normal; min-width: 12ch; margin-top: var(--espace-1); }
td:has(> .etat) { min-width: 15ch; }

/* --- Les pastilles d'état --------------------------------------------------- */

.etat {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: var(--texte-xs); font-weight: var(--graisse-grasse);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
/* Les couleurs ne portent jamais l'information toutes seules : le mot est
   écrit dans la pastille. Quelqu'un qui ne distingue pas le vert du rouge
   lit « actif » ou « suspendu ». */
.etat-actif    { background: #E9F5EC; color: #14532D; }
.etat-invite   { background: var(--wpn-jaune-100); color: var(--wpn-jaune-900); }
.etat-suspendu { background: #FDECEA; color: #8C1D18; }

.puce-role {
  display: inline-block; padding: 2px 8px; border-radius: var(--rayon-sm);
  font-size: var(--texte-xs); font-weight: var(--graisse-grasse);
  background: var(--wpn-violet-100); color: var(--wpn-violet-800);
}

/* --- Le vide ---------------------------------------------------------------- */

.rien {
  padding: var(--espace-16) var(--espace-8); text-align: center;
  color: var(--wpn-neutre-400);
}

/* --- La fenêtre modale ------------------------------------------------------ */

.modale {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--espace-6);
  background: rgba(27, 31, 42, .55);
  overflow-y: auto;
}
.modale-boite {
  background: var(--wpn-blanc); color: var(--wpn-ancre);
  border-radius: var(--rayon-lg);
  padding: var(--espace-8);
  width: 100%; max-width: 520px;
  box-shadow: var(--ombre-lg);
  max-height: 90vh; overflow-y: auto;
}
.modale-boite h2 {
  font-family: var(--police-titre); font-weight: var(--graisse-grasse);
  font-size: var(--texte-xl); margin: 0 0 var(--espace-2);
}
.modale-sous { color: var(--wpn-neutre-400); font-size: var(--texte-sm); margin: 0 0 var(--espace-6); }
.modale-pied {
  display: flex; justify-content: flex-end; gap: var(--espace-3);
  margin-top: var(--espace-8); flex-wrap: wrap;
}
.modale-pied .btn-plein { width: auto; margin: 0; padding: 11px 20px; }

/* --- Le lien d'invitation à copier -------------------------------------------- */

/* Le lien est en pleine largeur, en police à chasse fixe et sélectionnable :
   c'est un objet qu'on copie, pas un texte qu'on lit. Il peut être long, donc
   il se coupe n'importe où plutôt que de déborder de la boîte. */
.lien-invitation {
  display: block; width: 100%;
  margin: var(--espace-4) 0;
  padding: 12px 14px;
  background: var(--wpn-neutre-50);
  border: 1px solid var(--wpn-neutre-100); border-radius: var(--rayon-md);
  font-family: var(--police-mono); font-size: var(--texte-xs);
  line-height: 1.5; word-break: break-all; color: var(--wpn-ancre);
}

/* --- Le journal ---------------------------------------------------------------- */

.journal-quand { font-family: var(--police-mono); font-size: var(--texte-xs); color: var(--wpn-neutre-400); white-space: nowrap; }
.journal-action { font-family: var(--police-mono); font-size: var(--texte-xs); }
.journal-detail { color: var(--wpn-neutre-400); font-size: var(--texte-xs); word-break: break-word; }

/* --- Petits écrans ---------------------------------------------------------------
   La barre latérale passe au-dessus du contenu et les onglets s'alignent en
   rangée défilante. Karl ouvrira surtout ce portail sur un ordinateur, mais il
   doit pouvoir suspendre un compte depuis son téléphone. */
@media (max-width: 860px) {
  .portail { grid-template-columns: 1fr; }
  .cote {
    position: static; height: auto;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: var(--espace-4);
  }
  .cote-onglets {
    flex-direction: row; flex: 1 1 100%; order: 3;
    overflow-x: auto; padding-bottom: 2px;
  }
  .cote-onglets button { white-space: nowrap; }
  .cote-pied {
    flex-direction: row; align-items: center; gap: var(--espace-4);
    border-top: 0; padding-top: 0; margin-left: auto;
  }
  .cote-qui { display: none; }
  .principal { padding: var(--espace-6) var(--espace-4) var(--espace-16); }
}

/* ==========================================================================
   Les tableaux sur petit écran — chaque ligne devient une carte

   POURQUOI CE BASCULEMENT, ET PAS UN SIMPLE DÉFILEMENT LATÉRAL
   -------------------------------------------------------------------------
   Le `overflow-x: auto` du cadre suffisait à empêcher la page de déborder,
   mais pas à rendre le tableau utilisable : sur un écran de 390 px, la
   cellule d'actions empilait ses cinq boutons hors du champ visible, et
   chaque rangée devenait un rectangle de 200 px presque vide. Vérifié dans
   Chrome — c'est ce qui a déclenché ce bloc.

   Les cellules deviennent donc des lignes, l'en-tête disparaît, et chaque
   valeur porte le nom de sa colonne devant elle. Ce nom vient de
   `data-etiquette`, posé par portail-admin.js sur chaque `<td>` : une colonne
   ajoutée sans son étiquette s'affichera sans intitulé sur téléphone.
   ========================================================================== */

@media (max-width: 700px) {
  .cadre-tableau { overflow-x: visible; background: none; border: 0; border-radius: 0; }

  table, tbody, tr, td { display: block; width: 100%; }
  /* L'en-tête n'a plus de sens quand il n'y a plus de colonnes. Il reste dans
     le document — donc lisible par un lecteur d'écran — mais hors du champ. */
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  tbody tr {
    background: var(--wpn-blanc);
    border: 1px solid var(--wpn-neutre-100);
    border-radius: var(--rayon-lg);
    margin-bottom: var(--espace-4);
    padding: var(--espace-2) var(--espace-4);
  }
  tbody tr:hover { background: var(--wpn-blanc); }

  tbody td {
    display: flex; gap: var(--espace-4);
    align-items: baseline; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--wpn-neutre-50);
    text-align: right;
  }
  tbody td::before {
    content: attr(data-etiquette);
    flex: none; text-align: left;
    font-size: var(--texte-xs); text-transform: uppercase; letter-spacing: .08em;
    color: var(--wpn-neutre-400); font-weight: var(--graisse-grasse);
  }
  /* Une cellule sans étiquette — la colonne des actions — n'affiche pas de
     puce vide devant elle. */
  tbody td:not([data-etiquette])::before { content: none; }

  /* Le nom, en tête de carte, occupe toute la largeur : c'est le titre. */
  tbody td:first-child { display: block; text-align: left; }
  tbody td:first-child::before { display: block; margin-bottom: var(--espace-1); }

  .cellule-actions {
    justify-content: flex-start; border-bottom: 0;
    padding-top: var(--espace-3);
  }
  .cellule-actions button { flex: 1 1 auto; min-width: 8rem; }

  .etat + small { min-width: 0; }
  td:has(> .etat) { min-width: 0; }
  .journal-detail { word-break: break-word; }

  .rien { background: var(--wpn-blanc); border-radius: var(--rayon-lg); padding: var(--espace-12) var(--espace-6); }
}

/* Sur téléphone, une cellule qui porte une mention secondaire (`<small>`)
   passe en colonne : l'étiquette au-dessus, la valeur en dessous. En ligne,
   la date « 29 août 2026, 00 h 20 » se cassait sur trois lignes contre le
   bord droit de la carte, parce que le `<small>` en dessous forçait déjà un
   retour. Vérifié dans Chrome à 390 px. */
@media (max-width: 700px) {
  tbody td:has(small) { display: block; text-align: left; }
  tbody td:has(small)::before { display: block; margin-bottom: var(--espace-1); }
}