/* ============================================== IDENTITÉ TAGS, LA FEUILLE
   Les jetons et le fond de l'accueil de la maison, recopiés et non approchés : c'est
   la même maison, et un service d'identité qui ne ressemblerait pas aux outils
   donnerait l'impression d'un site tiers au moment précis où l'on demande à quelqu'un
   qui il est.

   Les variables portent les mêmes noms que dans les cinq outils, ce qui permet à
   « compte.css » de vivre ici comme ailleurs sans un réglage de plus. */
:root{
  --bleu:#5A63E8; --surv:255 255 255; --sur:#FFFFFF; --sur-on:#2E3596;
  --encre:#141633; --dim:#6C6F94; --faint:#9A9DBC;
  --acc:#5A63E8; --acc-dk:#3C44BE; --acc-soft:#EEF0FE; --acc-line:#C9CDF7;
  --line:#E6E7F2; --line-2:#EFF0F7; --card-2:#F4F5FB;
  --halo-c:255 255 255; --halo-w:.20; --halo-d:.24;
  --rouge:#D8483F; --vert:#2F8F63;
}
/* SUR LE POSTE, LE FOND EST NOIR. Second signe apres le favicon rouge : l'etabli et
   la production ne se confondent plus d'un coup d'oeil. La regle est ici et non dans
   un script, donc elle s'applique au premier affichage et pas une demi-seconde
   apres. Ce sont les deux memes jetons que la palette des outils change. */
html[data-lieu="poste"] body{--bleu:#0B0B0E; --sur-on:#0B0B0E}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Figtree,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;
  background:var(--bleu);
  background-image:radial-gradient(1100px 720px at 64% -6%,
      rgb(var(--halo-c)/var(--halo-w)),transparent 62%),
    radial-gradient(820px 560px at 2% 104%,rgb(var(--surv)/var(--halo-d)),transparent 60%);
  background-attachment:fixed;
  color:var(--sur);-webkit-font-smoothing:antialiased;
}

.topbar{position:relative;display:flex;align-items:center;gap:14px;
  height:74px;padding:22px 30px 10px}
/* « hidden » seul ne suffit pas : sa regle par defaut est un « display:none » de
   faible priorite, et le « display:flex » juste au-dessus la gagne. Sans cette
   ligne, la page de connexion gardait son en-tete alors que le script le masquait. */
.topbar[hidden]{display:none}
.tb-mk{line-height:0;text-decoration:none}
.tb-mk img{height:22px;width:auto;display:block}
.sp{flex:1}

/* ================================== LA MISE EN PAGE DES ÉCRANS DE PARAMÈTRES
   Les mêmes valeurs que dans Atlas et Engage, parce que ce sont les mêmes écrans du
   point de vue de celui qui les ouvre : il vient de son outil, il ne doit pas avoir
   l'impression d'avoir changé de maison.

   Le titre EN HAUT, centré, et les blocs dessous, dans une colonne centrée. Rien
   n'est centré verticalement : une liste de comptes peut dépasser la hauteur de
   l'écran, et un titre qui flotte au milieu se déplace avec le nombre de lignes.

   Une seule différence assumée : la colonne est un peu plus large que les 760 px des
   outils, parce qu'elle porte un tableau à quatre colonnes. */
.ec{width:min(860px,100%);margin:0 auto;display:flex;flex-direction:column;
  /* 22 px et non 18 : la barre du haut de ce service est de 4 px plus courte que
     celle des outils, et c'est le titre qui doit tomber à la même hauteur qu'eux, pas
     le retrait qui doit porter le même chiffre. Mesuré : 96 px des deux côtés. */
  align-items:stretch;gap:24px;padding:22px 30px 60px;box-sizing:border-box}
/* La connexion, elle, garde son centrage plein écran : elle ne porte qu'une question
   et quelques visages, et rien ne peut y dépasser. */
.ec.mid{min-height:calc(100vh - 84px);align-items:center;justify-content:center;
  gap:34px;padding-bottom:120px}
.h{margin:0;text-align:center;font-size:clamp(23px,2.6vw,34px);font-weight:300;
  font-family:"Bricolage Grotesque",Figtree,sans-serif;
  letter-spacing:-.015em;line-height:1.16}
.sub{margin:8px auto 0;text-align:center;font-size:12.5px;color:rgb(var(--surv)/.66);
  line-height:1.55;max-width:560px}

/* ------------------------------------------------------------------- connexion
   Une vignette par compte. C'est la porte d'entrée PROVISOIRE : elle identifie sans
   authentifier, et l'avertissement sous le titre le dit, pour que personne ne la
   prenne pour une sécurité. */
.gens{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:760px}
.gen{display:flex;flex-direction:column;align-items:center;gap:10px;border:0;
  cursor:pointer;font:inherit;padding:22px 26px;border-radius:22px;
  background:rgb(var(--surv)/.14);border:1px solid rgb(var(--surv)/.22);
  color:var(--sur);min-width:170px;transition:.15s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gen:hover{background:rgb(var(--surv)/.24);transform:translateY(-2px)}
.gen b{font-size:14px;font-weight:640}
/* « > span » et non « span » : la vignette contient aussi la miniature du compte,
   qui est un span, et qui n'a rien à voir avec le titre affiché sous le nom. */
.gen > span{font-size:11.5px;color:rgb(var(--surv)/.66)}
.gen.off{opacity:.45}
.gen.off b::after{content:" · désactivé";font-weight:400;font-size:11px}
/* ======================================================= LA PAGE DE CONNEXION
   La mise en page de l'accueil des outils, sans son en-tete : meme fond, memes
   lettres, meme centrage exact dans la fenetre. C'est la premiere page qu'on voit de
   la maison, et souvent la seule avant d'entrer.

   Les valeurs viennent de accueil/web/index.html, recopiees et non approchees. Une
   page de connexion qui ressemblerait a un site tiers au moment precis ou l'on
   demande a quelqu'un qui il est, c'est le contraire de ce qu'on veut. */
.ec.mid.porte{gap:38px;padding-bottom:90px;min-height:100vh}
/* LE MOT-SYMBOLE SEUL, AU-DESSUS DE LA VIGNETTE. Il y avait ici un titre de
   bienvenue dont le nom d'outil defilait, et un sous-titre. Une phrase qui bouge
   au-dessus d'un seul bouton attire l'oeil ailleurs que sur lui, et cette page n'a
   qu'une chose a faire faire. */
.marque{height:26px;width:auto;display:block}

/* LA VIGNETTE, RECOPIEE DE L'ACCUEIL et non approchee : meme voile, meme lisere,
   meme flou, meme arrondi, meme ecart. C'est l'objet que tout le monde connait deja,
   et le reconnaitre ici dit, sans une phrase, que la porte mene bien a ces outils-la.

   Un seul ecart assume : 258 px de cote au lieu de 222. La vignette d'un outil porte
   une phrase de six mots ; celle-ci en porte une de quinze, et a 222 px elle tombait
   a huit lignes serrees entre le logo et le bouton. */
.sol{flex:0 0 258px;aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:24px;
  border-radius:24px;
  background:rgb(var(--surv)/.14);border:1px solid rgb(var(--surv)/.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* 30 px et non les 22 px des outils, et c'est pour OBTENIR la meme taille apparente.
   Les mots-symboles des outils sont dessines en capitales, leur image ne contient que
   la hauteur des lettres. « Google » a une minuscule a jambage, le « g » : son image
   porte donc un tiers de hauteur que l'oeil ne compte pas. A hauteur d'image egale,
   ses lettres paraissaient un tiers plus petites que celles d'ATLAS. */
.sol-lg{height:30px;width:auto;max-width:100%;object-fit:contain;display:block}
.sol-t{margin:0;text-align:center;font-size:12px;line-height:1.5;
  color:rgb(var(--surv)/.80);max-width:196px;text-wrap:balance}
/* Le bouton : aplat blanc, encre indigo. La marque d'un objet allume dans toute la
   maison, l'onglet retenu d'un plan comme le bouton d'une demo. */
.sol-b{display:inline-flex;align-items:center;justify-content:center;
  min-width:106px;height:34px;padding:0 18px;margin-top:2px;
  border-radius:999px;text-decoration:none;
  background:var(--sur);color:var(--sur-on);
  font-size:12.5px;font-weight:640;letter-spacing:-.005em;
  box-shadow:0 10px 26px -14px rgba(8,10,34,.6);
  transition:transform .14s,box-shadow .14s,background .14s}
.sol-b:hover{transform:translateY(-1px);background:#F4F5FF;
  box-shadow:0 16px 32px -16px rgba(8,10,34,.7)}
.sol-b:active{transform:translateY(0)}
.sol-b:focus-visible{outline:2px solid var(--sur);outline-offset:3px}

/* Sur un ecran etroit, le bloc reste centre dans la fenetre : « min-height:auto »
   le collait en haut et laissait les deux tiers de l'ecran vides dessous. Seuls le
   retrait et l'ecart se resserrent. */
@media (max-width:900px){
  .ec.mid.porte{padding:40px 24px;gap:30px}
}

.avis{margin:0;display:flex;align-items:center;gap:9px;justify-content:center;
  font-size:12.5px;color:rgb(var(--surv)/.68);text-align:left;max-width:620px}
.avis span{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sur);background:rgb(var(--surv)/.18);
  border:1px solid rgb(var(--surv)/.26);border-radius:999px;padding:3px 9px}

/* ----------------------------------------------------------------- les cartes */
.carte{background:var(--sur);color:var(--encre);border-radius:22px;padding:22px 24px;
  box-shadow:0 30px 70px -40px rgba(6,8,30,.5),0 0 0 1px rgb(var(--surv)/.3);
  /* Pas de marge : c'est le « gap » du conteneur qui espace les blocs, comme dans les
     outils. Deux mécanismes d'espacement se seraient additionnés. */
  margin:0}
.carte > h2{margin:0 0 4px;font-size:15px;font-weight:660}
.carte > p.aide{margin:0 0 16px;font-size:12px;color:var(--faint);line-height:1.55}

.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
label.ch{display:block}
label.ch b{display:block;font-size:11px;font-weight:620;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 5px}
input[type=text],input[type=email],select{width:100%;font:inherit;font-size:13.5px;
  color:var(--encre);background:var(--card-2);border:1px solid var(--line);
  border-radius:12px;padding:9px 11px}
input:focus,select:focus{outline:none;border-color:var(--acc-line);
  background:var(--sur);box-shadow:0 0 0 3px var(--acc-soft)}
input[disabled],select[disabled]{opacity:.55;cursor:not-allowed}

.b{border:0;font:inherit;font-size:13px;font-weight:620;border-radius:12px;
  padding:10px 16px;cursor:pointer;background:var(--acc);color:#fff;transition:.14s}
.b:hover{background:var(--acc-dk)}
.b.pale{background:var(--card-2);color:var(--encre);box-shadow:inset 0 0 0 1px var(--line)}
.b.pale:hover{background:var(--line-2)}
.b.danger{background:transparent;color:var(--rouge);box-shadow:inset 0 0 0 1px #F0CFCC}
.b.danger:hover{background:#FDF4F3}
.b.mini{padding:6px 11px;font-size:12px;border-radius:10px}
.actes{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}

/* -------------------------------------------------------------------- la liste */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;font-weight:640;color:var(--faint);
  text-transform:uppercase;letter-spacing:.07em;padding:0 10px 8px;white-space:nowrap}
td{padding:9px 10px;border-top:1px solid var(--line-2);vertical-align:middle}
tr.off td{opacity:.5}
.qui{display:flex;align-items:center;gap:10px}
.qui b{font-weight:620}
.qui small{display:block;color:var(--faint);font-size:11.5px}
.puce{display:inline-block;font-size:11px;font-weight:620;border-radius:999px;
  padding:3px 9px;background:var(--acc-soft);color:var(--acc-dk)}
.puce.gris{background:var(--card-2);color:var(--dim)}

/* Le périmètre d'un compte : une ligne par droit de regard, et le bouton qui en
   ajoute une. Deux colonnes vides sont refusées PAR LE SERVEUR, l'écran ne fait que
   l'annoncer avant. */
.per{display:flex;flex-direction:column;gap:8px}
.per-l{display:flex;gap:8px;align-items:center}
.per-l select{flex:1}
.vide{margin:0;font-size:12px;color:var(--rouge)}
.msg{margin:14px 0 0;font-size:12.5px;color:var(--vert)}
.msg.err{color:var(--rouge)}
.retour{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:rgb(var(--surv)/.8);text-decoration:none;padding:8px 0}
.retour:hover{color:var(--sur)}

/* ------------------------------------------------------------------ la fenêtre
   LE FORMULAIRE DE PROFIL S'OUVRE PAR-DESSUS depuis le 10 septembre 2026. Il était
   ajouté à la suite de la carte des comptes : avec quinze comptes, modifier le
   dernier obligeait à faire défiler toute la liste pour retrouver le formulaire,
   puis à remonter pour vérifier. Une fenêtre se pose là où le regard est déjà. */
.voile{
  position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;
  justify-content:center;padding:40px 18px;overflow:auto;
  background:rgba(10,12,40,.52);backdrop-filter:blur(3px);
}
.voile[hidden]{display:none}
.fen{
  width:min(720px,100%);margin:auto;animation:fen-entre .16s ease-out;
}
.fen .carte{margin:0}
@keyframes fen-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fen{animation:none}}
.fen-tete{display:flex;align-items:flex-start;gap:12px}
.fen-tete h2{flex:1;margin:0}
.fen-x{
  flex:none;border:0;background:var(--card-2);color:var(--dim);cursor:pointer;
  width:28px;height:28px;border-radius:9px;font:inherit;font-size:15px;line-height:1;
}
.fen-x:hover{background:var(--line-2);color:var(--encre)}
body.fige{overflow:hidden}

/* SUPPRIMER SE VOIT, ET SE VOIT DEUX FOIS. Au repos c'est le bouton rouge pale deja
   au catalogue, pousse tout a droite : on ne le clique pas en visant « Enregistrer ».
   Confirme, il se remplit et ecrit le nom de la personne, parce que c'est le dernier
   endroit ou l'on peut encore lire ce qu'on s'apprete a faire. */
.b.danger{margin-left:auto}
.b.danger.chaud{margin-left:0;background:var(--rouge);color:#fff;box-shadow:none}
.b.danger.chaud:hover{background:var(--rouge);filter:brightness(1.08)}
.b.danger[disabled]{opacity:.6;cursor:default;filter:none}
.aide-sup{flex-basis:100%;font-size:11.5px;line-height:1.5;color:var(--encre-2, inherit);
  opacity:.7;margin-top:-2px}