/* MC Business : composants ajoutés par la charte (phase 1f). Montrés sur composants.html ; la barre basse, le « + » et
   la feuille du bas n'entrent dans l'application qu'en phase 2a. Jetons de charte.css seulement. */

/* Pictogrammes : <svg class="picto"><use href="icones/pictos.svg#appel"/></svg>, trait 2 px à la couleur du texte. */
.picto{width:var(--picto);height:var(--picto);flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.nombre{font-variant-numeric:tabular-nums}

/* Pastilles nommées par teinte ; le sens (type, ville, segment…) se fixe écran par écran. .tag = alias (administration). */
.pastille,.tag{display:inline-flex;align-items:center;align-self:flex-start;gap:var(--esp-1);padding:2px var(--esp-2);
  border-radius:var(--rayon-plein);font-size:var(--fs-12);font-weight:700;line-height:1.5;white-space:nowrap;
  background:var(--pastille-neutre-fond);color:var(--pastille-neutre-texte)}
.pastille-verte,.tag-sure{background:var(--pastille-verte-fond);color:var(--pastille-verte-texte)}
.pastille-bleue,.tag-probable{background:var(--pastille-bleue-fond);color:var(--pastille-bleue-texte)}
.pastille-orange,.tag-possible{background:var(--pastille-orange-fond);color:var(--pastille-orange-texte)}
.pastille-neutre{background:var(--pastille-neutre-fond);color:var(--pastille-neutre-texte)}
.pastilles{display:flex;flex-wrap:wrap;gap:var(--esp-1)}

/* Ronds d'action (tête de fiche) : Appel, E-mail, Note, Tâche, Visite. */
.ronds{display:flex;justify-content:space-between;gap:var(--esp-1)}
.rond-action{display:flex;flex-direction:column;align-items:center;gap:var(--esp-1);min-width:var(--cible);
  padding:0;border:0;background:none;color:var(--text);font-size:var(--fs-12);font-weight:600;text-decoration:none}
.rond-action .rond{display:flex;align-items:center;justify-content:center;width:var(--rond);height:var(--rond);
  border-radius:var(--rayon-plein);background:var(--rond-fond);color:var(--rond-picto)}
.rond-action:active .rond{background:var(--rule-strong)}
.rond-action:disabled{opacity:.5;cursor:default}

/* Barre basse à onglets, « + » central (création rapide). */
.barre-basse{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  align-items:end;padding:var(--esp-1) var(--esp-1) calc(env(safe-area-inset-bottom) + var(--esp-1));
  background:var(--surface-raised);border-top:1px solid var(--rule)}
.barre-basse a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;
  color:var(--text-muted);font-size:var(--fs-12);font-weight:600;text-decoration:none}
.barre-basse a{position:relative}
.barre-basse a.actif{color:var(--marque);font-weight:700}
/* Repère de l'onglet actif : un seul à la fois, il glisse d'un onglet à l'autre (View Transitions, app.css). */
.barre-basse .repere{display:none}
.barre-basse a.actif .repere{display:block;position:absolute;top:calc(-1 * var(--esp-1));left:25%;right:25%;height:3px;
  border-radius:0 0 var(--rayon-plein) var(--rayon-plein);background:var(--accent);view-transition-name:repere}

/* Feuille du bas : fond voilé, panneau arrondi en haut, poignée. */
.feuille-fond{position:fixed;inset:0;z-index:800;display:flex;align-items:flex-end;background:var(--scrim-solid);
  background:var(--scrim-mid)}
.feuille{width:100%;max-height:85vh;overflow-y:auto;padding:var(--esp-2) var(--esp-4) calc(env(safe-area-inset-bottom) + var(--esp-4));
  background:var(--surface-raised);border-radius:var(--rayon-feuille) var(--rayon-feuille) 0 0;box-shadow:var(--ombre-haute)}
.feuille::before{content:'';display:block;width:40px;height:4px;margin:0 auto var(--esp-3);border-radius:var(--rayon-plein);
  background:var(--rule-strong)}
.feuille h2{font-size:var(--fs-19);margin-bottom:var(--esp-3)}
.feuille-choix{display:flex;align-items:center;gap:var(--esp-3);width:100%;min-height:52px;padding:0 var(--esp-1);
  border:0;border-bottom:1px solid var(--rule);background:none;text-align:left;font-weight:600}
.feuille-choix:last-child{border-bottom:0}
.feuille-choix .rond{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:var(--rayon-plein);background:var(--rond-fond);color:var(--rond-picto)}

/* Page de référence : états « ouverts » placés dans le flux (aucun style en ligne, aucun script). */
.ref{max-width:640px;margin:0 auto;padding:var(--esp-4) var(--esp-4) var(--esp-8)}
.ref-section{margin:0 0 var(--esp-8)}
.ref-section > h2{font-size:var(--fs-19);margin:0 0 var(--esp-3);padding-bottom:var(--esp-2);border-bottom:1px solid var(--rule)}
.ref-pile{display:flex;flex-direction:column;gap:var(--esp-2)}
.ref-rang{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
.champ input.demo-focus{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:-1px}
.demo-ouvert{position:relative;inset:auto;z-index:auto;min-height:0}
.dialogue-fond.demo-ouvert,.feuille-fond.demo-ouvert{padding:var(--esp-6) var(--esp-4);border-radius:var(--rayon-carte)}
.feuille-fond.demo-ouvert{padding-bottom:0}
.barre-basse.demo-ouvert{border:1px solid var(--rule);border-radius:var(--rayon-carte)}
.toasts-demo{display:flex;flex-direction:column;gap:var(--esp-2)}
.nuancier{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--esp-1);margin:0 0 var(--esp-3)}
.nuance{height:var(--rond);border-radius:var(--rayon-champ);border:1px solid var(--rule)}
.nuance-vert{background:var(--sceau-vert)}
.nuance-vert-fonce{background:var(--sceau-vert-fonce)}
.nuance-orange{background:var(--sceau-orange)}
.nuance-orange-presse{background:var(--sceau-orange-presse)}
.nuance-papier{background:var(--sceau-papier)}
/* Repli (<details>) : le titre est un bouton ; le contenu s'ouvre dessous. */
.replie{margin-top:var(--esp-2)}
.replie>summary{list-style:none;cursor:pointer}
.replie>summary::-webkit-details-marker{display:none}
.replie[open]>summary{margin-bottom:var(--esp-3)}
.reglages>:not(summary)+*{margin-top:var(--esp-2)}
.feuille:focus{outline:none} /* focus posé sur la feuille quand aucun champ n'attend de saisie */