/*
 * Charte des outils EEIF : composants (préfixe .ei-).
 * Copie à l'identique de components/bundle.css de la charte « Charte des outils EEIF »
 * (https://claude.ai/artifact/J1ko9YS5LWGcpAbgpMXWvZ, version du 23/09/2026).
 * Ne pas modifier à la main : ce qui manque va dans complements.css.
 */
/* Charte des outils EEIF — composants de base, préfixe .ei-
   Dépend de tokens.css (variables --bleu-eeif, --orange-eeif, etc.). */
.ei-app { background: var(--fond); color: var(--encre); font-family: var(--font-texte); font-size: 1rem; line-height: 1.6; }
.ei-app h1, .ei-app h2, .ei-app h3 { font-family: var(--font-titre); }

/* Focus clavier commun */
.ei-btn:focus-visible, .ei-input:focus-visible, .ei-select:focus-visible, .ei-link:focus-visible, .ei-passeport:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; }

/* Boutons */
.ei-btn { display: inline-flex; align-items: center; gap: var(--espace-2); font-family: var(--font-titre); font-size: .95rem; font-weight: 600; line-height: 1.2;
  padding: 10px var(--espace-4); border-radius: var(--rayon-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.ei-btn--primaire { background: var(--bleu-eeif); color: var(--sur-bleu); }
.ei-btn--primaire:hover { background: var(--bleu-profond); }
.ei-btn--accent { background: var(--orange-eeif); color: var(--sur-orange); }
.ei-btn--accent:hover { background: var(--orange-survol); }
.ei-btn--secondaire { background: var(--surface); color: var(--bleu-eeif); border-color: var(--trait-fort); }
.ei-btn--secondaire:hover { background: var(--bleu-doux); }
.ei-btn--danger { background: var(--danger); color: var(--sur-danger); }
.ei-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Champs */
.ei-field { display: flex; flex-direction: column; gap: var(--espace-1); max-width: 360px; }
.ei-label { font-weight: 600; font-size: .92rem; color: var(--encre); }
.ei-input, .ei-select { font: inherit; color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-md); padding: 9px var(--espace-3); }
.ei-help { font-size: .92rem; color: var(--encre-douce); }
.ei-field--erreur .ei-input { border-color: var(--danger); border-width: 2px; }
.ei-error { font-size: .92rem; color: var(--danger); font-weight: 600; }

/* Section / carte — signature EEIF : titre bleu souligné d'orange */
.ei-section { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-xl); padding: 28px var(--espace-7); }
.ei-section > h2 { color: var(--bleu-eeif); font-family: var(--font-titre); font-size: 1.3rem; font-weight: 600; margin: 0 0 var(--espace-3);
  display: inline-block; padding-bottom: var(--espace-1); border-bottom: 3px solid var(--orange-eeif); }
.ei-section > h3 { color: var(--bleu-eeif); font-size: 1.05rem; margin: var(--espace-4) 0 6px; }
@media (max-width: 600px) { .ei-section { padding: var(--espace-5) 18px; } }

/* Encadré « À noter » */
.ei-note { background: var(--orange-doux); border-left: 4px solid var(--orange-eeif); border-radius: var(--rayon-sm);
  padding: var(--espace-3) var(--espace-4); font-size: .92rem; color: var(--encre); }
.ei-note strong { color: var(--orange-fonce); }

/* Badges */
.ei-badge { display: inline-block; font-family: var(--font-texte); font-size: .8rem; font-weight: 600; line-height: 1.3;
  padding: 2px var(--espace-3); border-radius: var(--rayon-pilule); }
.ei-badge--role { background: var(--bleu-doux); color: var(--bleu-eeif); }
.ei-badge--accent { background: var(--orange-eeif); color: var(--sur-orange); }
.ei-badge--succes { background: var(--succes-doux); color: var(--succes); }
.ei-badge--danger { background: var(--danger-doux); color: var(--danger); }
.ei-badge--neutre { background: var(--surface-creuse); color: var(--encre-douce); }

/* Tableaux */
.ei-table-wrap { overflow-x: auto; }
.ei-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--surface); }
.ei-table th, .ei-table td { text-align: left; padding: var(--espace-2) 10px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.ei-table th { background: var(--surface-creuse); color: var(--bleu-eeif); font-family: var(--font-titre); font-weight: 600; }
.ei-table tr:hover td { background: var(--bleu-doux); }

/* En-tête commun */
.ei-header { background: var(--en-tete); color: var(--sur-en-tete); display: flex; align-items: center; justify-content: space-between;
  gap: var(--espace-4); padding: var(--espace-3) var(--espace-5); }
.ei-header__marque { display: flex; align-items: baseline; gap: var(--espace-2); font-family: var(--font-titre); }
.ei-header__eeif { font-weight: 700; font-size: 1rem; letter-spacing: .02em; }
.ei-header__sep { width: 3px; height: 18px; background: var(--orange-eeif); border-radius: 2px; align-self: center; }
.ei-header__outil { font-weight: 600; font-size: 1.05rem; }
.ei-header__user { display: flex; align-items: center; gap: var(--espace-2); font-size: .92rem; }
.ei-header__avatar { width: 30px; height: 30px; border-radius: var(--rayon-pilule); background: var(--orange-eeif); color: var(--sur-orange);
  display: grid; place-items: center; font-family: var(--font-titre); font-weight: 600; font-size: .8rem; }

/* Bouton Passeport EI */
.ei-passeport { display: inline-flex; align-items: center; gap: var(--espace-3); background: var(--surface); color: var(--encre);
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-md); padding: 10px var(--espace-4); font-family: var(--font-titre);
  font-weight: 600; font-size: .95rem; cursor: pointer; }
.ei-passeport__pastille { width: 26px; height: 26px; border-radius: var(--rayon-sm); background: var(--bleu-eeif); color: var(--sur-bleu);
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; position: relative; }
.ei-passeport__pastille::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 4px; height: 2px; background: var(--orange-eeif); border-radius: 1px; }
.ei-passeport:hover { background: var(--bleu-doux); }