/* Ouraya Coffre : l'aide (public/app/ecrans/aide.js), les premiers pas
   (public/app/premiers-pas.js) et la liste des raccourcis clavier
   (public/app/raccourcis.js), qui servent aussi la racine du coffre et le
   panneau ouvert par « ? ».
   Sur les jetons de /lumiere.css et les classes de /coffre/coffre.css.
   Aucune couleur en dur : le mode nuit suit seul, par les jetons.
   Préfixes : « aide- », « pp- » (premiers pas), « rac- » (raccourcis). */

/* ======================================================= PREMIERS PAS == */
/* À la racine du coffre : une bande discrète entre le titre et la liste. */
.fi-premiers-pas{margin:0 0 clamp(14px,2vw,22px)}
.fi-premiers-pas:empty,.pp-hote:empty{display:none}

.pp{
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-radius:var(--r-bloc);
  padding:12px 14px 14px 16px;
}
.pp-tete{display:flex;align-items:center;gap:10px;min-height:32px;margin-bottom:8px}
.pp-titre{margin:0;font-family:var(--f-titre);font-size:.98rem;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.pp-compte{margin:0;font:400 12px/1 var(--f-technique);color:var(--texte-faible);font-variant-numeric:tabular-nums}
.pp[data-toutes] .pp-compte{color:var(--c-succes)}
.pp-tete > .bouton-nu{margin-left:auto}

/* Une colonne sur un téléphone, deux ensuite, les quatre de front quand la
   bande a la place : la largeur de la bande décide, pas celle de la fenêtre. */
.pp{container-type:inline-size}
.pp-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:10px 22px;
}
@container (min-width:480px){.pp-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:880px){.pp-liste{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pp-etape{display:flex;align-items:flex-start;gap:10px;min-width:0}
.pp-case{flex:none;display:grid;place-items:center;margin-top:1px;color:var(--texte-faible)}
.pp-etape[data-fait] .pp-case{color:var(--c-succes)}
.pp-texte{min-width:0}
.pp-etape-titre{margin:0;font-size:.9rem;line-height:1.35;color:var(--texte)}
.pp-etape[data-fait] .pp-etape-titre{color:var(--texte-doux)}
.pp-detail{margin:2px 0 0;font-size:.8rem;line-height:1.45;color:var(--texte-faible)}
.pp-action{display:inline-block;margin-top:4px;font-size:.84rem}
.pp-pied{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--trait)}

/* ======================================================== RACCOURCIS == */
.rac{display:grid;gap:22px}
.rac-titre{margin:0 0 6px;font-size:1rem;font-weight:500}
.rac-intro{margin:0 0 8px}
.rac-liste{margin:0}
.rac-ligne{
  display:grid;grid-template-columns:minmax(128px,max-content) minmax(0,1fr);
  gap:4px 18px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--trait);
}
.rac-ligne:first-child{border-top:0}
.rac-touches{margin:0;line-height:1.9}
.rac-texte{margin:0;font-size:.9rem;line-height:1.45;color:var(--texte)}
.rac-touche{
  display:inline-block;min-width:1.7em;text-align:center;
  font:500 12px/1 var(--f-technique);
  padding:4px 6px;
  color:var(--texte);background:var(--surface);
  border:1px solid var(--trait-net);border-bottom-width:2px;border-radius:var(--r-net);
}
.rac-plus,.rac-ou{font-size:.8rem;color:var(--texte-faible)}
.rac-suite{margin:22px 0 0}
@media (max-width:519px){
  .rac-ligne{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================== AIDE == */
.aide-page{max-width:860px}
.aide-section{padding-block:clamp(18px,2.4vw,26px);border-top:1px solid var(--trait)}
.aide-section:first-of-type{border-top:0;padding-top:0}
.aide-titre{margin:0 0 12px;font-family:var(--f-titre);font-size:1.22rem;font-weight:400;letter-spacing:-.02em}
.aide-section > p{max-width:66ch;margin:0 0 10px}
.aide-section > p.mention{margin-bottom:12px}
.aide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.aide-liens{margin:0;padding-left:1.2em;display:grid;gap:6px}