/*
 * inscription-libre.css — Parcours « Créer un compte » de la modale d'accès
 * (scripts/inscription-libre.js) et page de confirmation (inscription-confirmer.html).
 * S'appuie sur les variables de theme.css : le mode sombre suit sans règle dédiée.
 * Tient en Mobile S (320 px) : aucune largeur fixe, les lignes passent à la ligne.
 */

.il-liste {
  display: grid;
  gap: 8px;
}

/* Une ligne de choix : case ou bouton radio natif, nom, légende, pastille « Vérifiée ». */
.il-choix {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: var(--surface, #fff);
  cursor: pointer;
  min-width: 0;
}
.il-choix:hover,
.il-choix:focus-within {
  border-color: var(--accent, #00afb5);
}
.il-choix.is-selected {
  border-color: var(--accent, #00afb5);
  background: color-mix(in srgb, var(--accent, #00afb5) 9%, var(--surface, #fff));
}
.il-choix input {
  margin: 3px 0 0;
  flex: 0 0 auto;
  accent-color: var(--accent, #00afb5);
}
.il-choix-texte {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
}
.il-choix-nom {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.il-choix .badge {
  align-self: center;
}

/* [2026-10-02, maquette creer-un-compte] Logo d'organisation ou icône de type entre la case et le
   nom. Le logo et la pastille de filière reprennent les classes de la liste de la page
   (orgpick-avatar, orgpick-filiere d'index-v3.css), sorties de la grille qui les y place. */
.il-choix--visuel {
  align-items: center;
}
.il-choix--visuel > input {
  margin: 0;
}
.il-choix .orgpick-avatar {
  grid-area: auto;
}
.il-choix-texte .orgpick-filiere {
  grid-area: auto;
  margin-top: 4px;
}
.il-ico {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--brand, #004777);
  background: color-mix(in srgb, var(--brand, #004777) 8%, var(--surface, #fff) 92%);
}
.il-choix.is-selected .il-ico {
  color: color-mix(in srgb, var(--accent, #00afb5) 70%, var(--text, #04151f) 30%);
  background: color-mix(in srgb, var(--accent, #00afb5) 16%, var(--surface, #fff));
}
.il-ico svg {
  width: 19px;
  height: 19px;
}
.il-ico--petit {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.il-ico--petit svg {
  width: 16px;
  height: 16px;
}

/* Bandeau de l'organisation choisie : logo et nom comme la fiche de la fenêtre de connexion
   (orgid-logo, orgid-name d'index-v3.css), choix faits dessous. */
/* Le corps de la fenêtre n'espace pas ses blocs : le bandeau se détache de ce qui suit. */
.il-resume {
  margin-bottom: 12px;
}
.il-bandeau {
  display: flex;
  align-items: center;
  gap: 12px;
}
.il-bandeau .orgid-logo {
  width: 42px;
  height: 42px;
}
.il-bandeau-texte {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.il-bandeau .orgid-name {
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.il-bandeau-detail {
  font-size: 0.92rem;
  color: var(--text, #04151f);
}

/* Repère d'étape sous le titre : un trait par étape, celui en cours en couleur. */
.il-etapes {
  display: flex;
  gap: 4px;
  padding: 0 18px 12px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  background: var(--surface, #f9fafb);
}
.il-etapes[hidden] {
  display: none;
}
.il-avec-etapes > .tem-header {
  border-bottom: 0;
  padding-bottom: 10px;
}
.il-etapes span {
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  background: var(--line, #e5e7eb);
}
.il-etapes span.is-done {
  background: color-mix(in srgb, var(--accent, #00afb5) 45%, var(--surface, #fff));
}
.il-etapes span.is-current {
  background: var(--accent, #00afb5);
}
@media (max-width: 560px) {
  /* Même retrait que l'en-tête de la fenêtre à cette largeur (time-ecos-modal.css). */
  .il-etapes {
    padding: 0 14px 12px;
  }
}

/* Organisation fermée : grisée, sa raison est dans l'infobulle du wrapper focalisable. */
.il-choix-grise {
  display: block;
  border-radius: 10px;
}
.il-choix.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.il-choix.is-disabled:hover {
  border-color: var(--line, #e5e7eb);
}

/* Habilitations d'un intervenant, en retrait sous son type. */
.il-sous-choix {
  display: grid;
  gap: 6px;
  margin-left: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--line, #e5e7eb);
}

/* Titre d'un groupe de promotions, pastille « Facultatif » à droite (badge-muted de badges.css). */
.il-groupe-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 12px;
}
.il-liste + .il-groupe-tete {
  margin-top: 16px;
}
.il-groupe-titre {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #04151f);
}

.il-deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0 10px;
}

/* Adresse à domaine unique : on tape le début, le domaine est déjà posé. */
.il-email {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 6px);
  background: var(--bg, #fff);
  overflow: hidden;
}
.il-email:focus-within {
  outline: 2px solid var(--accent, #00afb5);
  outline-offset: 1px;
}
.il-email .tem-input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-radius: 0;
}
.il-email .tem-input:focus-visible {
  outline: none;
}
/* Adresse remplie avec un autre domaine que celui attendu : case en rouge, message dessous. */
.il-email.is-error {
  border-color: var(--danger, #b42318);
  background: color-mix(in srgb, var(--danger, #b42318) 5%, var(--surface, #fff));
}
.il-email.is-error:focus-within {
  outline-color: var(--danger, #b42318);
}
.il-email.is-error .tem-input {
  background: transparent;
}
.il-suffixe {
  flex: 0 1 auto;
  max-width: 62%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-left: 1px solid var(--line, #e5e7eb);
  background: var(--surface, #f9fafb);
  color: var(--muted, #6b7280);
  font-size: var(--text-sm, 0.875rem);
  overflow-wrap: anywhere;
}

.il-consentement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-sm, 0.875rem);
  cursor: pointer;
}
.il-consentement input {
  margin: 3px 0 0;
  flex: 0 0 auto;
  accent-color: var(--accent, #00afb5);
}

/* Bouton masqué du pied (« Retour » à la vérification de l'adresse) : `.btn` pose un `display`
   qui l'emporterait sur l'attribut `hidden`. */
.il-parcours .tem-footer .btn[hidden] {
  display: none;
}

/* Wrapper de l'infobulle du bouton « Suivant » grisé (pied de la modale). */
.il-suivant {
  display: inline-flex;
}

/* Page de confirmation (inscription-confirmer.html). */
.il-confirmation {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}
.il-confirmation p {
  margin: 0;
}
.il-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Accueil du tableau de bord : première connexion d'un compte né de l'inscription libre
   (scripts/dashboard-accueil-inscription-libre.js). */
.il-accueil {
  display: grid;
  gap: 10px;
}
.il-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.il-pastilles .badge {
  white-space: normal;
  flex-shrink: 1;
}
.il-accueil-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}