/* ==========================================================================
   MAP+ — socle des écrans de compte (lot 2B)
   Écrit le 26/08/2026, jalon J0. Fichier NOUVEAU. Ne rend rien caduc.

   CE QUE CE FICHIER EST, ET CE QU'IL N'EST PAS

   jetons.css porte les VALEURS : couleurs, tailles, rayons, espacements,
   anneau de focus. Ce fichier-ci porte les MOTIFS : ce à quoi ressemble une
   page, une carte, un champ, une erreur, un bouton.

   RÈGLE DE SÉPARATION, à ne pas défaire : ce fichier ne redéfinit JAMAIS
   une variable de jetons.css, et n'écrit JAMAIS une couleur, une taille, un
   rayon ou un espacement en dur. S'il en manque un, il s'ajoute dans
   jetons.css — jamais ici. Le jour où les deux fichiers portent chacun des
   valeurs, la source unique a cessé d'exister et personne ne s'en apercevra.

   POURQUOI IL EXISTE. Les motifs de l'outil de passation (.btn, .stickycard,
   .meta input…) sont écrits en dur dans un <style> de map-2847/index.html.
   Ils sont donc invisibles pour toute autre page. Les cinq écrans du 2B
   auraient recopié ce CSS ou en auraient réinventé un ; recopier fabrique
   aujourd'hui, en le sachant, la dette qu'on prétend éviter.

   L'OUTIL NE CHARGE PAS CE FICHIER, et ne le chargera pas au 2B. Sa
   migration se fait au J3, moment où il doit de toute façon être rouvert
   pour être rattaché aux comptes. Jusque-là, deux vocabulaires coexistent —
   dette assumée, pas ignorée.

   L'ÉCRAN PARTAGÉ vaut aussi ici, et pas seulement pour l'outil : un CIP
   peut se connecter devant le bénéficiaire, ou pendant un partage d'écran.
   D'où : aucun texte sous 15 px sur ces écrans (--t-micro est réservé au
   texte destiné au seul CIP, et n'est employé nulle part dans ce fichier),
   et aucune valeur de contraste sous AA.
   ========================================================================== */

*{box-sizing:border-box}

html{
  /* Pas de font-size en dur : l'échelle de jetons.css est en pixels
     absolus, donc la base du document ne doit rien redimensionner. La page
     d'attente actuelle fixe 17px et écrit ses tailles en rem — c'est ce qui
     l'a fait sortir de l'échelle sur quatre de ses cinq tailles. */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--police);
  font-size:var(--t-base);
  line-height:1.55;
  color:var(--texte);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
}

/* --------------------------------------------------------------------------
   LE GABARIT — une carte centrée sur le fond de page.

   Repris de la page d'attente et du 404, qui sont ce qu'un CIP voit
   aujourd'hui du produit. Un gabarit distinct aurait fait un troisième
   vocabulaire visuel sur le même domaine.
   -------------------------------------------------------------------------- */
.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--e-4);
}

.carte{
  width:100%;
  max-width:460px;
  background:var(--carte);
  border:1px solid var(--filet-carte);
  border-radius:var(--r-carte);
  padding:var(--e-5);
  box-shadow:var(--ombre-carte);
}

/* --------------------------------------------------------------------------
   LA MARQUE

   Le « + » est en --marque-accent : MESURÉ à 2,15:1 sur blanc. WCAG exempte
   les logotypes du seuil AA, donc ce n'est pas un défaut — mais c'est une
   exemption, pas une conformité, et --marque-accent ne doit jamais porter
   autre chose qu'un logotype.
   -------------------------------------------------------------------------- */
.marque{
  font-size:var(--t-petit);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--marque);
  margin:0 0 var(--e-5);
}
.marque i{font-style:normal;color:var(--marque-accent)}

/* --------------------------------------------------------------------------
   TITRES ET TEXTE
   -------------------------------------------------------------------------- */
.titre{
  font-size:var(--t-moyen);
  font-weight:700;
  line-height:1.3;
  margin:0 0 var(--e-2);
}

.chapo{
  font-size:var(--t-base);
  color:var(--texte-attenue);   /* 5,37:1 sur --carte — AA */
  margin:0 0 var(--e-5);
}

.corps{margin:0 0 var(--e-4)}
.corps:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   LE MOTIF DE CHAMP

   Un champ est TOUJOURS : étiquette, contrôle, puis aide OU erreur — jamais
   les deux. L'aide dit quoi saisir avant la faute ; l'erreur dit quoi faire
   après. Les empiler ferait lire deux instructions concurrentes au moment
   précis où la personne est bloquée.
   -------------------------------------------------------------------------- */
.champ{margin-bottom:var(--e-3)}

.champ label{
  display:block;
  font-size:var(--t-petit);
  font-weight:600;
  color:var(--texte);
  margin-bottom:var(--e-1);
}

.champ input{
  width:100%;
  font-family:inherit;
  font-size:var(--t-base);
  color:var(--texte);
  background:var(--carte);
  border:1px solid var(--filet);
  border-radius:var(--r-moyen);
  padding:var(--e-3);
}

.champ input:focus{
  outline:none;                       /* remplacé, jamais supprimé */
  border-color:var(--marque);
  box-shadow:var(--anneau-focus);
}

.champ input:disabled{
  background:var(--inactif-fond);
  color:var(--inactif-texte);
  cursor:not-allowed;
}

/* L'aide : ce qu'il faut savoir AVANT de saisir. */
.champ .aide{
  font-size:var(--t-petit);
  color:var(--texte-attenue);
  margin-top:var(--e-2);
}

/* --------------------------------------------------------------------------
   LA CASE A COCHER — un seul motif a ce jour : afficher le mot de passe.

   Le controle et son libelle sont TOUJOURS cote a cote, jamais l'un sous
   l'autre comme un champ : une case a cocher n'a pas d'etiquette separee
   de son controle, elle EST son controle. Aucune valeur nouvelle : les
   six jetons ci-dessous existaient deja dans jetons.css.
   -------------------------------------------------------------------------- */
.case{
  display:flex;
  align-items:center;
  gap:var(--e-2);
  margin-top:var(--e-2);
  cursor:pointer;
  user-select:none;
}
.case input[type="checkbox"]{
  width:var(--taille-badge);
  height:var(--taille-badge);
  flex:none;
  accent-color:var(--marque);
}
.case input[type="checkbox"]:focus-visible{
  outline:none;
  box-shadow:var(--anneau-focus);
  border-radius:var(--r-petit);
}
.case span{
  font-size:var(--t-petit);
  color:var(--texte);
}

/* --------------------------------------------------------------------------
   L'ERREUR DE CHAMP

   Jamais la couleur seule : une puce et un mot portent l'information, la
   couleur la renforce. En visio, la compression dégrade d'abord le texte fin
   et les faibles contrastes — un état signalé par la seule teinte du filet
   disparaîtrait.
   -------------------------------------------------------------------------- */
.champ.faux input{
  border-color:var(--etat-non);
}
.champ.faux input:focus{
  box-shadow:var(--anneau-focus-erreur);
}

.champ .erreur{
  display:flex;
  gap:var(--e-2);
  align-items:flex-start;
  font-size:var(--t-petit);
  color:var(--etat-non-texte);        /* 9,28:1 sur --carte */
  margin-top:var(--e-2);
}
.champ .erreur::before{
  content:"!";
  flex:none;
  width:var(--taille-badge);height:var(--taille-badge);
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pilule);
  background:var(--etat-non);
  color:var(--texte-inverse);
  font-size:var(--t-petit);
  font-weight:700;
  line-height:1;
}

/* --------------------------------------------------------------------------
   LES BOUTONS

   Primaire : une seule action par écran. Secondaire : la sortie.
   -------------------------------------------------------------------------- */
.btn{
  display:block;
  width:100%;
  font-family:inherit;
  font-size:var(--t-base);
  font-weight:600;
  border:0;
  border-radius:var(--r-moyen);
  padding:var(--e-3);
  cursor:pointer;
  background:var(--marque);
  color:var(--texte-inverse);         /* 7,90:1 */
  /* AJOUT 30/08/2026 — un <a class="btn"> heritait du soulignement des
     liens : « Voir mes dossiers », « Ouvrir l'outil de passation » et
     « Se connecter » s'affichaient soulignes DANS leur bouton, ce qui
     les faisait lire comme des liens poses la. Constate le 28/08 sur un
     seul bouton et corrige au cas par cas ; J5beta a montre le 30/08 que
     c'etait la regle qui manquait, pas trois oublis. text-align sert au
     meme titre : un <a> n'est pas centre par defaut, un <button> si. */
  text-decoration:none;
  text-align:center;
}
.btn:hover{filter:brightness(1.07)}
.btn:focus-visible{outline:none;box-shadow:var(--anneau-focus)}

.btn.secondaire{
  background:var(--bouton-neutre);
  color:var(--texte);
  /* Le contour n'est pas decoratif : sans lui, 1,14:1 contre une carte.
     Concerne « Se connecter » sur la landing — la premiere action d'un
     CIP qui decouvre le produit. Voir --filet-action dans jetons.css. */
  border:1px solid var(--filet-action);
}

.btn:disabled,
.btn:disabled:hover{
  background:var(--inactif-fond);
  color:var(--inactif-texte);
  filter:none;
  cursor:not-allowed;
}

.actions{margin-top:var(--e-4)}
.actions .btn + .btn{margin-top:var(--e-2)}

/* --------------------------------------------------------------------------
   L'ACTION UNIQUE — règle posée le 26/08, jalon J0

   S'IL Y A UNE ACTION ATTENDUE, ELLE EST SEULE. Un bouton pleine largeur est
   une promesse : c'est ce qu'on attend de vous. En avoir deux ne fait pas
   gagner un choix, ça fait hésiter — et deux boutons de même taille, même
   poids et même forme ne se distinguent que par la couleur, ce que la
   compression vidéo dégrade en premier.

   Tout recours passe donc en LIEN sous le bouton : mot de passe oublié,
   renvoyer un lien, retourner en arrière.

   LE REVERS DE LA RÈGLE, et non son exception : quand AUCUNE action n'est la
   bonne — la page vide — les issues sont des PAIRS. Deux boutons secondaires
   valent mieux qu'un primaire arbitraire qui désignerait une issue au hasard.
   C'est le seul cas où .actions porte deux .btn.
   -------------------------------------------------------------------------- */
.lien-action{
  display:block;
  text-align:center;
  margin-top:var(--e-3);
  font-size:var(--t-petit);
  font-weight:600;
  color:var(--marque);            /* 7,90:1 sur --carte */
}
.lien-action:focus-visible{
  outline:none;
  border-radius:var(--r-petit);
  box-shadow:var(--anneau-focus);
}

/* --------------------------------------------------------------------------
   LES ÉTATS DE PAGE — succès, échec, attente, page vide

   Quatre blocs de même forme, distingués par une pastille, un mot et une
   teinte de fond. Jamais par la couleur seule.

   Ils remplacent le contenu de la carte ; ils ne s'ajoutent pas au-dessus.
   Un écran qui affiche à la fois un formulaire et son résultat laisse la
   personne se demander lequel des deux est à jour.
   -------------------------------------------------------------------------- */
.etat{
  display:flex;
  gap:var(--e-3);
  align-items:flex-start;
  border-radius:var(--r-moyen);
  padding:var(--e-3);
  margin-bottom:var(--e-4);
}
.etat p{margin:0}
.etat .quoi{font-weight:700;display:block;margin-bottom:var(--e-1)}

.etat::before{
  flex:none;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pilule);
  color:var(--texte-inverse);
  font-size:var(--t-petit);
  font-weight:700;
  line-height:1;
}

.etat.succes{background:var(--etat-oui-fond);color:var(--etat-oui-texte)}
.etat.succes::before{content:"\2713";background:var(--etat-oui)}

.etat.echec{background:var(--etat-non-fond);color:var(--etat-non-texte)}
.etat.echec::before{content:"!";background:var(--etat-non)}

/* L'ATTENTE EST NEUTRE, PAS VIGILANTE — corrigé le 26/08.
   Elle empruntait --vigilance-*, jetons créés pour le bandeau des deux FOCUS
   de l'outil : ils disent « point de vigilance ». L'employer pour dire « en
   cours » mettait deux sens dans la même teinte — la dérive exacte que la
   règle fondatrice de jetons.css existe pour empêcher, sauf qu'elle ne parle
   que des couleurs de domaine et ne couvrait pas ce cas.
   Rien ne va mal quand on attend : il ne s'est simplement encore rien passé.
   NE PAS RENDRE --vigilance-* À CET ÉTAT. */
.etat.attente{background:var(--etat-neutre-fond);color:var(--etat-neutre-texte)}
.etat.attente::before{content:"\2026";background:var(--etat-neutre)}

/* ATTENTE ET PAGE VIDE PARTAGENT DONC LE REGISTRE NEUTRE, volontairement :
   ni l'une ni l'autre ne dit quoi que ce soit d'une valeur. Elles ne
   coexistent jamais sur un écran, et ce sont la pastille et les mots qui les
   distinguent — jamais la teinte.
   MESURÉ le 26/08, et vrai des QUATRE états : aucun fond ne « contient » son
   bloc par la luminance — 1,11:1 pour le neutre, 1,10 pour l'acquis, 1,15
   pour le non, 1,02 pour la vigilance, tous sur --carte. Ce qui les fait
   lire, c'est la teinte, et c'est précisément ce que la compression vidéo
   dégrade. Dette notée, non traitée : y toucher demanderait de reprendre les
   quatre, ce qui est un chantier de front, pas une correction de jeton. */

/* La page vide n'est pas un échec : rien ne s'est mal passé, il n'y a
   simplement rien à montrer. Elle prend le registre neutre, et elle porte
   TOUJOURS une action — une page vide sans issue est un cul-de-sac. */
.etat.vide{background:var(--etat-neutre-fond);color:var(--etat-neutre-texte)}
.etat.vide::before{content:"\2013";background:var(--etat-neutre)}

/* --------------------------------------------------------------------------
   LE PIED
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   LE PIED — deux niveaux, jamais un seul

   Une action et une signature au même corps et à la même couleur se lisent
   comme une mention légale : « Créer un accès » disparaissait sous « un outil
   fait entre confrères CIP ». Le pied porte donc une bifurcation d'abord, la
   signature ensuite, distinguées par le corps ET par la couleur.

   La bifurcation n'est PAS une action attendue — elle s'adresse à quelqu'un
   qui n'est pas au bon endroit. Elle ne prend donc jamais un bouton.
   -------------------------------------------------------------------------- */
.pied{
  margin-top:var(--e-5);
  padding-top:var(--e-4);
  border-top:1px solid var(--filet);
}

.pied .bifurcation{
  font-size:var(--t-base);
  color:var(--texte);
  margin:0 0 var(--e-3);
}
.pied .bifurcation a{color:var(--marque);font-weight:600}

.pied .signature{
  font-size:var(--t-petit);
  color:var(--texte-attenue);
  margin:0;
}

/* --------------------------------------------------------------------------
   MOBILE

   La carte perd son ombre et ses coins : à pleine largeur, un rayon sur un
   bord d'écran se lit comme un défaut d'affichage.
   -------------------------------------------------------------------------- */
@media (max-width:520px){
  .page{padding:0}
  .carte{
    max-width:none;
    min-height:100vh;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:var(--e-5) var(--e-4);
  }
}