/* ============================================================
   ANIMA — accueil pro après connexion (B8h) + quête « premiers pas » (B8f), spec 2026-09-23 phase 1
   Mise en page de la vue « connecté » du prototype « Le journal » v2 (J-N) ; quête portée de ~/anima-proto/proto2.
   AUCUNE couleur ici : tout vient de css/tokens.css (tests/charte.test.mjs).
   ============================================================ */

/* ---------- Accueil dans le langage de surface (css/coque.css : .tete, .volet, .entrees) ---------- */
/* Tes séjours : le moment en couleur (point de sa bande), le rôle tenu, les dates */
.ens-moment { display: inline-flex; align-items: center; gap: .45rem; color: var(--texte-2); }
.ens-moment::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--m-bande); box-shadow: 0 0 0 1.5px var(--texte); }
.ens-sejour.mom-simulation { --m-bande: transparent; }
.ens-meta .ac-role { color: var(--texte); font-weight: 600; }
.ens-meta .ac-role.est-vide { color: var(--texte-2); font-weight: 500; font-style: italic; }
/* À traiter : les priorités, numérotées, sur deux colonnes */
.volet .prio-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; border-top: 1px solid var(--ligne); }
.volet .prio { grid-template-columns: 2.2ch minmax(0, 1fr); gap: .9rem; padding: 1rem 0 1.1rem; align-content: start; }
.volet .prio .prio-num { font-family: var(--sans); font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.volet .prio.gravite-critique .prio-num { color: var(--critique); }
.volet.est-profond .prio.gravite-critique .prio-num { color: var(--texte); }
.volet .prio-titre { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.15; }
.volet .prio:is(:hover, :has(.prio-lien:focus-visible)) { background: var(--survol-fond); box-shadow: calc(-1 * var(--entree-deb)) 0 0 var(--survol-fond), var(--entree-deb) 0 0 var(--survol-fond), calc(-1 * var(--entree-deb) - 3px) 0 0 var(--survol-filet); }
.ac-v2 .prio-sejour { color: var(--texte); font-weight: 600; }
.ac-v2 .prio-sejour::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: var(--m-bande); vertical-align: .08em; }
.ac-plus { margin: .8rem 0 0; font-size: .86rem; }
.lien-suite { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 500; font-size: .92rem; color: var(--texte); }
.lien-suite span { text-decoration: underline; text-decoration-color: var(--ligne-2); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lien-suite:hover span { text-decoration-color: currentColor; }
.lien-suite .ico { transition: transform var(--dur) var(--ease); }
.lien-suite:hover .ico { transform: translateX(3px); }
@media (max-width: 860px) { .volet .prio-liste { grid-template-columns: minmax(0, 1fr); } }
.ac-vide { margin-top: .8rem; padding: clamp(1.1rem, 3vw, 1.6rem); background: var(--s1); border: 1px dashed var(--ligne-2); border-radius: var(--c-r); display: grid; gap: .5rem; justify-items: start; }
.ac-vide .ico { width: 26px; height: 26px; color: var(--texte-3); }
.ac-vide .titre-3 { margin: 0; }
.ac-vide p { margin: 0; color: var(--texte-2); max-width: 60ch; }
.ac-vide-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.ac-autres { margin-top: .8rem; }

/* ---------- Quête « premiers pas » ---------- */
.quete-avancement { display: grid; gap: .5rem; max-width: 22rem; padding-top: 1rem; border-top: 1px solid var(--ligne); }
.quete-avancement b { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; line-height: 1; }
.quete-avancement small { color: var(--texte-2); }
.quete-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.mission { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 1rem 1.4rem; align-items: start; padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--ligne); }
.mission-num { font-family: var(--sans); font-size: .95rem; font-weight: 600; line-height: 1.9; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.mission-num .ico { width: 22px; height: 22px; }
.mission h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.1; margin: 0; }
.mission h3 a { color: inherit; }
.mission h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mission p { color: var(--texte-2); margin: .35rem 0 0; max-width: 60ch; }
.mission-meta { display: flex; gap: .8rem; align-items: center; margin-top: .7rem; flex-wrap: wrap; }
.mission-meta .mono { color: var(--texte-3); font-size: .82rem; }
.etiquette { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; border: 1px solid var(--ligne-2); border-radius: 2px; color: var(--texte-2); }
.mission-droite { display: grid; gap: .5rem; justify-items: end; }
.mission.est-fait { padding-block: .7rem; align-items: center; color: var(--texte-3); }
.mission.est-fait .mission-num { color: var(--ok); line-height: 1; }
.mission.est-fait h3 { font-size: 1.1rem; font-family: var(--sans); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--ligne-2); }
.mission.est-fait p, .mission.est-fait .mission-meta { display: none; }
.mission.est-suivante { background: var(--accent-fond); box-shadow: calc(-1 * var(--entree-deb)) 0 0 var(--accent-fond), var(--entree-deb) 0 0 var(--accent-fond), calc(-1 * var(--entree-deb) - 3px) 0 0 var(--accent); }
.mission.est-suivante .mission-num { color: var(--texte); }
.mission.est-verrou h3, .mission.est-verrou p { color: var(--texte-3); }
.quete-pied { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.quete-pied .c-note { margin: 0; max-width: 60ch; }

/* ---------- Coller un lien d'équipe (animateur sans séjour) ---------- */
.ac-coller { display: grid; gap: .45rem; margin-top: 1rem; width: 100%; max-width: 40rem; }
.ac-coller label { font-size: .82rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-2); }
.ac-coller-ligne { display: flex; gap: .5rem; flex-wrap: wrap; }
.ac-coller input { flex: 1 1 16rem; min-width: 0; padding: .6rem .8rem; font: inherit; color: var(--texte); background: var(--s2); border: 1px solid var(--ligne-2); border-radius: var(--c-r); }
.ac-coller input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ac-coller-erreur { margin: 0; color: var(--critique); font-size: .88rem; }

/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
  .mission { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .mission-droite { grid-column: 2; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .lien-suite .ico { transition: none; } }