/* ==========================================================================
   Window Portal Network — le socle visuel des espaces privés

   Trois pages partagent ce fichier : la porte (connexion), l'acceptation
   d'invitation, et l'espace client. Le portail d'administration ajoute
   par-dessus `portail-admin.css`.

   POURQUOI PAS DE MODE SOMBRE ICI
   -------------------------------------------------------------------------
   `tokens.css` bascule ses rôles sémantiques (--couleur-surface, etc.) selon
   la préférence du système. Une interface bâtie à moitié sur ces rôles et à
   moitié sur des blancs en dur donne exactement le piège noté dans
   ENTREPRISE.md : des cartes claires sur fond sombre, dont le texte hérite
   d'une couleur claire et devient illisible.

   Ces pages s'appuient donc sur les jetons BRUTS de la marque
   (--wpn-blanc, --wpn-ancre, --wpn-neutre-…), qui ne bougent jamais. Le jour
   où un vrai mode sombre sera voulu, il se fera d'un bloc, en connaissance
   de cause, et pas par accident.
   ========================================================================== */

* { box-sizing: border-box; }

/* `hidden` doit l'emporter sur tout `display` posé plus loin. Sans cette
   règle, un `.porte { display: flex }` rend visible un élément pourtant
   marqué caché — le piège est déjà documenté dans portail.css. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--wpn-fond);
  color: var(--wpn-ancre);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: var(--interligne-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--wpn-bleu-600); }

/* Un anneau de focus visible partout : ces pages se remplissent au clavier,
   et quelqu'un qui tabule d'un champ à l'autre doit voir où il est. */
:focus-visible {
  outline: 3px solid var(--wpn-bleu-400);
  outline-offset: 2px;
}

/* ==========================================================================
   Le logo, avec l'animation officielle de la marque — L'ÉCHANGE

   Repris TEL QUEL de `landing/site/assets/css/style.css`, comme le demande
   PROJET.md : « à porter partout où le logo est survolable ». Les deux
   losanges échangent leur place, et tout devient violet à mi-course.

   LA RÈGLE DU VIOLET, à ne pas casser en retouchant : il reçoit le décalage
   du JAUNE, sa découpe celui du BLEU. Comme le violet vit DANS le repère
   déjà décalé de +60, son propre décalage vaut −120 et non −60.
   ========================================================================== */

.logo-wpn { display: block; }
.logo-wpn .bleu, .logo-wpn .jaune, .logo-wpn .violet, .logo-wpn .coupe {
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.logo-lien:hover .logo-wpn .bleu   { transform: translateX(60px); }
.logo-lien:hover .logo-wpn .jaune  { transform: translateX(-60px); }
.logo-lien:hover .logo-wpn .coupe  { transform: translateX(60px); }
.logo-lien:hover .logo-wpn .violet { transform: translateX(-120px); }

/* L'animation est un plaisir, pas une information : qui a demandé moins de
   mouvement garde un logo parfaitement lisible, simplement immobile. */
@media (prefers-reduced-motion: reduce) {
  .logo-wpn .bleu, .logo-wpn .jaune, .logo-wpn .violet, .logo-wpn .coupe {
    transition: none;
  }
  .logo-lien:hover .logo-wpn .bleu,
  .logo-lien:hover .logo-wpn .jaune,
  .logo-lien:hover .logo-wpn .coupe,
  .logo-lien:hover .logo-wpn .violet { transform: none; }
}

.logo-lien {
  display: inline-flex; align-items: center; gap: var(--espace-3);
  text-decoration: none; color: inherit;
}
.logo-lien span {
  font-weight: var(--graisse-noire); font-size: 11px; line-height: 1.1;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ==========================================================================
   La porte — connexion et invitation
   ========================================================================== */

/* Le fond est l'ancre de la marque, réchauffée par deux halos : un bleu à
   gauche, un jaune à droite, comme les deux losanges avant qu'ils ne se
   rejoignent. La carte blanche est l'intersection — la pièce où l'on entre. */
.porte {
  min-height: 100vh;
  min-height: 100dvh;   /* sur téléphone, la barre d'adresse ne rogne plus */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--espace-6);
  /* Deux halos, un par losange : le bleu de Window en haut à gauche, le jaune
     de Network en bas à droite. Le jaune est monté à 34 % après vérification
     dans Chrome — à 22 % il ne se voyait pas du tout sur l'ancre, et le fond
     n'était plus qu'un dégradé bleu sans rapport avec la marque. */
  background:
    radial-gradient(62% 58% at 10% 6%,  rgba(10, 76, 139, .60), transparent 72%),
    radial-gradient(62% 58% at 92% 94%, rgba(232, 178, 60, .34), transparent 72%),
    var(--wpn-ancre);
}

.porte-carte {
  background: var(--wpn-blanc);
  /* Le fond de la porte est sombre : sans cette déclaration, le texte de la
     carte hériterait d'une couleur claire et disparaîtrait. C'est le piège
     documenté dans ENTREPRISE.md, section 5. */
  color: var(--wpn-ancre);
  border-radius: var(--rayon-xl);
  padding: var(--espace-12) var(--espace-8) var(--espace-8);
  width: 100%; max-width: 430px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

.porte-carte .logo-wpn { width: 54px; height: auto; }
.porte-carte .logo-lien { margin-bottom: var(--espace-6); }

.porte-carte h1 {
  font-family: var(--police-titre); font-weight: var(--graisse-noire);
  font-size: var(--texte-2xl); letter-spacing: -.02em;
  margin: 0 0 var(--espace-2);
}
.porte-sous {
  color: var(--wpn-neutre-500); font-size: var(--texte-sm);
  margin: 0 0 var(--espace-8);
}

/* Le pied de la porte : retour au site et choix de la langue. */
.porte-pied {
  margin-top: var(--espace-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espace-4); flex-wrap: wrap;
  font-size: var(--texte-sm);
}
.porte-pied a { color: var(--wpn-neutre-400); text-decoration: none; }
.porte-pied a:hover { color: var(--wpn-ancre); text-decoration: underline; }

/* ==========================================================================
   Champs et boutons
   ========================================================================== */

.champ { display: block; margin-bottom: var(--espace-4); }
.champ-nom {
  display: block; font-size: var(--texte-sm);
  font-weight: var(--graisse-moyenne); margin-bottom: var(--espace-2);
}
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--wpn-neutre-100); border-radius: var(--rayon-md);
  font-family: var(--police-texte); font-size: var(--texte-base);
  background: var(--wpn-neutre-50); color: var(--wpn-ancre);
}
.champ textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--wpn-bleu-700); background: var(--wpn-blanc);
  box-shadow: 0 0 0 3px rgba(10, 76, 139, .14);
}
.champ input:disabled, .champ select:disabled {
  background: var(--wpn-neutre-50); color: var(--wpn-neutre-400);
  cursor: not-allowed;
}
.champ-aide {
  display: block; margin-top: var(--espace-2);
  font-size: var(--texte-xs); color: var(--wpn-neutre-400);
}

/* La case « rester connecté » : la cible cliquable couvre le libellé entier,
   pas seulement le carré de 16 px. */
.champ-case {
  display: flex; align-items: flex-start; gap: var(--espace-3);
  margin: var(--espace-6) 0 0; cursor: pointer;
  font-size: var(--texte-sm);
}
.champ-case input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--wpn-bleu-700); }

.btn-plein {
  width: 100%; margin-top: var(--espace-6);
  padding: 14px; border: 0; border-radius: var(--rayon-md);
  background: var(--wpn-ancre); color: var(--wpn-blanc);
  font-family: var(--police-texte); font-size: var(--texte-base);
  font-weight: var(--graisse-grasse); cursor: pointer;
  transition: background .15s linear;
}
.btn-plein:hover { background: var(--wpn-bleu-700); }
.btn-plein:disabled { background: var(--wpn-neutre-300); cursor: progress; }

.btn-mince {
  padding: 9px 16px; border-radius: var(--rayon-md);
  border: 1.5px solid var(--wpn-neutre-100); background: var(--wpn-blanc);
  color: var(--wpn-ancre);
  font-family: var(--police-texte); font-size: var(--texte-sm);
  font-weight: var(--graisse-moyenne); cursor: pointer;
}
.btn-mince:hover { border-color: var(--wpn-ancre); }
.btn-mince:disabled { opacity: .5; cursor: not-allowed; }

/* Un bouton dont l'action détruit quelque chose se signale AVANT le clic.
   Il ne s'appelle jamais « Annuler » — ce mot veut d'abord dire « fermer
   sans rien faire », et la confusion coûterait des données. */
.btn-danger { color: #B3261E; border-color: rgba(179, 38, 30, .35); }
.btn-danger:hover { border-color: #B3261E; background: rgba(179, 38, 30, .06); }

.lien-discret {
  display: inline-block; margin-top: var(--espace-4);
  background: none; border: 0; padding: 0;
  font-family: var(--police-texte); font-size: var(--texte-sm);
  color: var(--wpn-bleu-600); cursor: pointer; text-decoration: none;
}
.lien-discret:hover { text-decoration: underline; }

/* ==========================================================================
   Messages
   ========================================================================== */

.message {
  margin: var(--espace-4) 0 0;
  padding: 11px 14px; border-radius: var(--rayon-md);
  font-size: var(--texte-sm); line-height: 1.45;
}
.message-erreur { background: #FDECEA; color: #8C1D18; border: 1px solid #F5C7C2; }
.message-succes { background: #E9F5EC; color: #14532D; border: 1px solid #BEE3C8; }
.message-info   { background: var(--wpn-bleu-50); color: var(--wpn-bleu-800); border: 1px solid var(--wpn-bleu-100); }

/* ==========================================================================
   Le sélecteur de langue
   ========================================================================== */

/* Trois codes côte à côte plutôt qu'une liste déroulante : à trois options,
   le menu coûte un clic de plus pour rien, et les codes se reconnaissent
   d'un coup d'oeil. Le libellé complet reste dans le `title` et dans
   l'étiquette lue par un lecteur d'écran. */
.langues { display: inline-flex; gap: 2px; }
.langues button {
  border: 0; background: none; cursor: pointer;
  padding: 4px 8px; border-radius: var(--rayon-sm);
  font-family: var(--police-texte); font-size: var(--texte-xs);
  font-weight: var(--graisse-grasse); letter-spacing: .06em;
  text-transform: uppercase; color: var(--wpn-neutre-400);
}
.langues button:hover { color: var(--wpn-ancre); background: rgba(27, 31, 42, .06); }
.langues button[aria-pressed="true"] {
  color: var(--wpn-blanc); background: var(--wpn-ancre);
}

/* Sur la porte, le sélecteur est posé sur le fond sombre, hors de la carte. */
.porte > .langues { margin-top: var(--espace-6); }
.porte > .langues button { color: var(--wpn-neutre-300); }
.porte > .langues button:hover { color: var(--wpn-blanc); background: rgba(255, 255, 255, .12); }
.porte > .langues button[aria-pressed="true"] {
  color: var(--wpn-ancre); background: var(--wpn-blanc);
}

/* ==========================================================================
   L'espace client
   ========================================================================== */

.tete {
  background: var(--wpn-blanc);
  border-bottom: 1px solid var(--wpn-neutre-100);
  position: sticky; top: 0; z-index: 10;
}
.tete-contenu {
  max-width: 1040px; margin: 0 auto;
  padding: var(--espace-4) var(--espace-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espace-4);
}
.tete .logo-wpn { width: 38px; height: auto; }
.tete-droite { display: flex; align-items: center; gap: var(--espace-4); }
.tete-qui {
  text-align: right; line-height: 1.25;
  font-size: var(--texte-sm);
}
.tete-qui b { display: block; font-weight: var(--graisse-grasse); }
.tete-qui span { color: var(--wpn-neutre-400); font-size: var(--texte-xs); }

.enveloppe { max-width: 1040px; margin: 0 auto; padding: var(--espace-12) var(--espace-6) var(--espace-24); }

.onglets {
  display: flex; gap: var(--espace-2);
  border-bottom: 1px solid var(--wpn-neutre-100);
  margin-bottom: var(--espace-8);
}
.onglets button {
  border: 0; background: none; cursor: pointer;
  padding: var(--espace-3) var(--espace-4);
  font-family: var(--police-texte); font-size: var(--texte-sm);
  font-weight: var(--graisse-moyenne); color: var(--wpn-neutre-400);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.onglets button:hover { color: var(--wpn-ancre); }
.onglets button[aria-selected="true"] {
  color: var(--wpn-ancre); border-bottom-color: var(--wpn-jaune-400);
}

.bienvenue { margin-bottom: var(--espace-12); }
.etiquette {
  font-size: var(--texte-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--wpn-neutre-400); font-weight: var(--graisse-grasse);
  margin: 0 0 var(--espace-2);
}
.bienvenue h1 {
  font-family: var(--police-titre); font-weight: var(--graisse-noire);
  font-size: var(--texte-3xl); letter-spacing: -.02em;
  margin: 0 0 var(--espace-2);
}
.bienvenue p { color: var(--wpn-neutre-500); margin: 0; }

.carte {
  background: var(--wpn-blanc); color: var(--wpn-ancre);
  border: 1px solid var(--wpn-neutre-100); border-radius: var(--rayon-lg);
  padding: var(--espace-8);
  margin-bottom: var(--espace-6);
}
.carte h2 {
  font-family: var(--police-titre); font-weight: var(--graisse-grasse);
  font-size: var(--texte-xl); margin: 0 0 var(--espace-6);
}
.carte-etiquette {
  font-size: var(--texte-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--wpn-neutre-400); font-weight: var(--graisse-grasse);
  margin: 0 0 var(--espace-3);
}

/* Le panneau « rien ici pour le moment ». Il n'y a encore aucune application
   dans l'espace client : plutôt qu'une page vide qui ressemble à une panne,
   on dit en toutes lettres qu'il n'y a rien à faire aujourd'hui. */
.vide {
  text-align: center; padding: var(--espace-16) var(--espace-8);
  border: 1.5px dashed var(--wpn-neutre-100); border-radius: var(--rayon-lg);
  background: var(--wpn-blanc);
}
.vide h2 {
  font-family: var(--police-titre); font-weight: var(--graisse-grasse);
  font-size: var(--texte-xl); margin: 0 0 var(--espace-3);
}
.vide p { color: var(--wpn-neutre-400); margin: 0 auto; max-width: 46ch; }

.paire { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--espace-6); }

.ligne-info {
  display: flex; justify-content: space-between; gap: var(--espace-4);
  padding: var(--espace-3) 0; border-bottom: 1px solid var(--wpn-neutre-50);
  font-size: var(--texte-sm);
}
.ligne-info:last-child { border-bottom: 0; }
.ligne-info span:first-child { color: var(--wpn-neutre-400); }

/* Sur téléphone, l'en-tête se resserre et le nom passe sous le logo si les
   deux ne tiennent plus côte à côte. */
@media (max-width: 560px) {
  .tete-contenu { flex-wrap: wrap; }
  .tete-qui { text-align: left; }
  .enveloppe { padding: var(--espace-8) var(--espace-4) var(--espace-16); }
  .carte { padding: var(--espace-6); }
  .porte-carte { padding: var(--espace-8) var(--espace-6) var(--espace-6); }
  .bienvenue h1 { font-size: var(--texte-2xl); }
}

/* --- Le lockup monochrome, sur fond sombre -------------------------------
   Employé là où le fond mangerait une des trois couleurs du logo : la barre
   latérale violette du portail d'administration, dont l'aplat est exactement
   le violet du logo. Le SVG est en `currentColor` et hérite donc du blanc
   posé sur `.cote .logo-lien`.

   Il n'a pas l'animation de l'échange, qui déplace les trois couleurs : elles
   n'existent pas dans cette version. Comme au pied de page, une simple
   atténuation signale qu'il est cliquable — c'est une marque, pas un lien
   ordinaire, et elle ne change pas de couleur au survol. */
.logo-mono:hover { opacity: .78; }
.logo-mono .logo-wpn { transition: none; }