/* L'aide « ? » (guide.js) : le guide, à droite, sous la barre du haut qui
   reste cliquable. Le texte et les captures du guide, dans la police et les
   couleurs de la console (mode nuit compris). */

.x-guide{position:fixed;top:var(--barre);right:0;bottom:0;z-index:30;width:min(600px,100vw);display:flex;flex-direction:column;
  background:var(--carte);border-left:1px solid var(--filet);box-shadow:0 10px 28px var(--ombre);font-family:var(--texte);color:var(--encre)}
.x-guide-h{display:flex;align-items:center;gap:12px;padding:14px 16px 8px 24px}
.x-guide-t{flex:1;min-width:0;font-size:12px;color:var(--doux)}
.x-guide-o{display:flex;gap:4px;padding:0 24px 10px;border-bottom:1px solid var(--filet2);flex-wrap:wrap}
.x-guide-o a{padding:5px 10px;border-radius:var(--r-btn);font-size:13px;color:var(--doux);text-decoration:none;cursor:pointer}
.x-guide-o a:hover{background:var(--survol-ligne);color:var(--encre)}
.x-guide-o a.on{background:var(--fond);color:var(--encre);box-shadow:inset 0 0 0 1px var(--filet)}
.x-guide-c{flex:1;overflow-y:auto;padding:4px 24px 32px;font-size:13.5px;line-height:1.6;outline:none}
.x-guide-vide{display:grid;place-items:center;min-height:200px;color:var(--doux)}
.x-guide-ret{display:inline-block;margin-top:14px;font-size:13px;color:var(--doux);text-decoration:none}
.x-guide-ret:hover{color:var(--encre)}

/* Le sommaire : les parties que ce rôle peut lire. */
.x-guide-som{list-style:none;margin:12px 0 0;padding:0}
.x-guide-som a{display:flex;gap:12px;padding:6px 10px;border-radius:var(--r-btn);color:var(--encre);text-decoration:none}
.x-guide-som a:hover{background:var(--survol-ligne)}
.x-guide-som .num{min-width:20px;text-align:right;color:var(--pale)}

/* Le guide lui-même. */
.x-guide-c section{padding-top:18px}
.x-guide-c section+section{margin-top:10px;border-top:1px solid var(--filet2)}
.x-guide-c h2{font-size:16px;font-weight:600;margin:0 0 10px;color:var(--a5)}
.x-guide-c h3{font-size:14px;font-weight:600;margin:18px 0 6px}
.x-guide-c p{margin:0 0 10px}
.x-guide-c ul,.x-guide-c ol{margin:0 0 12px;padding-left:20px}
.x-guide-c li{margin-bottom:5px}
.x-guide-c b{font-weight:600}
.x-guide-c figure{margin:10px 0 14px}
.x-guide-c figure.a-petit{max-width:70%}
.x-guide-c img{display:block;max-width:100%;height:auto;border:1px solid var(--filet);border-radius:8px}
.x-guide-c figcaption{font-size:12px;color:var(--doux);margin-top:5px}
.x-guide-c table{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:13px}
.x-guide-c th,.x-guide-c td{text-align:left;vertical-align:top;padding:7px 8px 7px 0;border-bottom:1px solid var(--filet2)}
.x-guide-c th{color:var(--doux);font-weight:600;width:34%}
.x-guide-c tr:first-child th+th{width:auto}
.x-guide-c .a-bouton{display:inline-block;font-weight:600;font-size:12.5px;line-height:1.5;padding:0 7px;
  border:1px solid var(--filet-fort);border-radius:6px;background:var(--champ);white-space:nowrap}
.x-guide-c .a-case{background:var(--fond);border-radius:10px;padding:10px 14px;margin:10px 0 12px}
.x-guide-c .a-case b:first-child{color:var(--a4)}
.x-guide-c .a-attention{background:var(--or-pale);border-radius:10px;padding:10px 14px;margin:10px 0 12px}
.x-guide-c .a-deux{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
/* Au téléphone, la barre prend trois rangs : l'aide prend tout l'écran, et se
   referme par sa croix ou Échap. */
@media (max-width:760px){
  .x-guide{top:0;z-index:40;border-left:0;box-shadow:none}
  .x-guide-h{padding-left:16px}
  .x-guide-o{padding:0 16px 10px}
  .x-guide-c{padding:4px 16px 28px}
  .x-guide-c .a-deux{grid-template-columns:1fr}
  .x-guide-c .a-bouton{white-space:normal}
}

/* Le bouton « ? » de la barre : allumé quand l'aide est ouverte. */
.x-guide-b{font-weight:600;font-size:14px;font-family:var(--texte)}
.x-guide-ouvert .x-guide-b{background:var(--survol-ligne);color:var(--encre)}