/* LE GUIDE UNIQUE : les dessins de l'accueil, et les mini-tutos de la mise en
 * route (2026-09-16).
 *
 * /!\ CETTE FEUILLE PORTAIT LE GUIDE COMPLET (une fenetre qui defilait, avec son
 * sommaire), RETIRE le 2026-09-16 sur decision du fondateur : « on va totalement
 * supprimer le guide complet accessible via l'ampoule ». Ses regles sont parties
 * avec lui. Elle garde son nom parce qu'elle garde son role : tout ce qui
 * EXPLIQUE l'application au client.
 *
 * /!\ La fenetre d'accueil elle-meme (taille, pied, pastilles) reste dans
 * `accueil.css`, chargee APRES celle-ci. On n'y ajoute ici que des classes
 * neuves, qu'aucune regle de `accueil.css` ne vise : pas d'egalite de
 * specificite a arbitrer.
 */

/* ── L'accueil : une hauteur qui ne bouge pas d'une image a l'autre ───────── */
/* /!\ Vu a l'ecran le 2026-09-16 : sans hauteur, la fenetre se recentrait a
   chaque « Suivant », parce que les cinq textes n'ont pas la meme longueur, et
   le bouton sautait sous le pointeur. `accueil.css` ne pose qu'un `max-height` :
   aucune regle a battre. Le corps defile s'il le faut (`flex: 1`). */
dialog.accueil-fenetre { height: min(780px, 92vh); }

/* ── L'accueil : le dessin de chaque vignette ────────────────────────────── */
/* /!\ **UNE BOITE DE PROPORTION FIXE (480 x 300), dessin present ou non.** Les
   dessins arrivent par un autre lot ; tant qu'un fichier manque, la boite reste
   a sa taille, et le texte ne saute pas quand il arrive. Meme lecon que les
   captures, qui portaient `width` et `height` pour la meme raison.
   /!\ Plafonnee en hauteur : sur un ecran bas, un dessin pleine largeur
   repoussait le texte sous le pied de la fenetre. */
.accueil-dessin {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  max-width: min(100%, calc(38vh * 480 / 300));
  margin: 0 auto;
  aspect-ratio: 480 / 300;
  /* Pas de fond : le dessin porte son propre halo, et un cadre gris autour
     l'enfermait dans une seconde boite (vu a l'ecran). */
  overflow: hidden;
}
.accueil-dessin svg { display: block; width: 100%; height: 100%; }

/* /!\ `.accueil-vignette` DEVANT : `accueil.css` pose `.accueil-vignette p`
   (une classe ET un element), qui battrait une classe seule. */
.accueil-vignette .accueil-etape {
  margin: 16px 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-2xs, .68rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-foreground);
}
/* `accueil.css` pose `margin: 16px 0 6px` sur le titre : on le rapproche du
   repere d'etape, qui le precede desormais. */
.accueil-vignette .accueil-etape + h2 { margin-top: 4px; }
.accueil-vignette p + p { margin-top: 8px; }
.accueil-vignette strong { color: var(--foreground); font-weight: 600; }

.accueil-liste {
  margin: 0; padding-left: 18px; max-width: 62ch;
  font-size: var(--text-sm); line-height: 1.6; color: var(--muted-foreground);
}
.accueil-liste li + li { margin-top: 6px; }

/* /!\ LE RISQUE NE VA PAS DANS UNE BULLE : il doit se lire meme quand on ne le
   cherche pas (regle heritee du guide retire, et elle vaut toujours). */
.accueil-vignette .accueil-risque,
.tuto-risque {
  padding: 8px 12px;
  border-left: 3px solid var(--warning, var(--accent, rgb(124, 108, 246)));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--muted, rgb(24, 26, 36));
  color: var(--foreground);
}

/* ── La mise en route : le mini-tuto sous chaque etape ───────────────────── */
.tuto { margin-top: 4px; }
.tuto summary {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; list-style: none;
  font-size: var(--text-body-sm, .85rem);
  color: var(--accent, rgb(124, 108, 246));
}
.tuto summary::-webkit-details-marker { display: none; }
/* Le chevron dit que ca se deplie, et il tourne quand c'est ouvert. */
.tuto summary::before {
  content: ''; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 160ms ease;
}
.tuto[open] summary::before { transform: rotate(45deg); }
.tuto summary:hover { color: var(--foreground); }
/* Sous une etape FAITE, le lien se tait : six liens de la meme couleur que le
   bouton de l'etape courante lui disputaient l'attention (vu a l'ecran). */
.mer-etape--faite .tuto summary { color: var(--muted-foreground); }
.tuto summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }

.tuto-corps {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 18px; align-items: start;
  margin: 10px 0 8px; padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background, transparent);
}
.tuto-dessin {
  width: 100%; aspect-ratio: 480 / 300;
  border-radius: var(--radius-md);
  background: var(--muted, rgb(24, 26, 36));
  color: var(--primary, rgb(124, 108, 246));
  overflow: hidden;
}
.tuto-dessin svg { display: block; width: 100%; height: 100%; }

.tuto-texte { min-width: 0; }
.tuto-texte p { margin: 8px 0 0; max-width: 68ch; }
.tuto-gestes {
  margin: 0; padding-left: 20px; max-width: 68ch;
  font-size: var(--text-body-sm, .85rem); line-height: 1.55;
  color: var(--muted-foreground);
}
.tuto-gestes li + li { margin-top: 5px; }
.tuto-texte strong { color: var(--foreground); font-weight: 600; }
.tuto-texte a { color: var(--accent, rgb(124, 108, 246)); }
.tuto-note, .tuto-risque {
  font-size: var(--text-body-sm, .85rem); line-height: 1.55;
  color: var(--muted-foreground);
}
.tuto-reussi {
  font-size: var(--text-body-sm, .85rem); line-height: 1.55;
  color: var(--foreground);
}
.tuto-reussi b { color: var(--success, rgb(52, 199, 123)); font-weight: 600; }
.tuto-mention {
  font-size: var(--text-xs, .75rem); line-height: 1.5;
  color: var(--muted-foreground); opacity: .85;
}

/* Les libelles a chercher A L'ECRAN de NinjaTrader, en anglais, au caractere
   pres : ils se distinguent du texte pour qu'on les repere d'un coup d'oeil.
   /!\ `.tuto-texte` et pas `.tuto` : les dessins portent eux aussi une classe
   `k` (`illustrations.css`), et le tuto les contient. */
.tuto-texte .k {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .92em;
  background: var(--muted); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 4px; color: var(--foreground);
  white-space: nowrap;
}

/* Sur un ecran etroit, le dessin passe au-dessus et se tient petit : il
   illustre, il ne doit pas repousser les gestes sous la ligne de flottaison. */
@media (max-width: 760px) {
  .tuto-corps { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .tuto-dessin { max-width: 220px; }
}