/* Style commun des guides Yop2D — couleurs de Palette.java du moteur */
:root { --background: #1A1F26; --entete: #242A33; --card: #252B33; --survol: #2F3B45; --bordure: #3A4048; --fond-sombre: #161A20; --text: #ECEEF0; --text-dim: #9AA0A8; --teal: #5DCAA5; --bleu: #85B7EB; --ambre: #FAC775; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.7; color: var(--text); background: var(--background); margin: 0; }
header { background: var(--entete); border-bottom: 1px solid var(--bordure); padding: 2rem 1rem; text-align: center; }
header a { color: var(--teal); }
header h1 { font-size: 1.8rem; margin: 0.5rem 0; color: white; }
header p { margin: 0; color: var(--text-dim); }
main { max-width: 820px; margin: 0 auto; padding: 1.5rem 1rem 2rem; }
h2 { color: var(--ambre); border-bottom: 1px solid var(--bordure); padding-bottom: 0.4rem; margin-top: 2.5rem; font-size: 1.3rem; }
a { color: var(--teal); }
strong { color: white; }
.method { background: var(--card); border: 1px solid var(--bordure); padding: 1rem 1.25rem; border-radius: 10px; }
.method ol, .method ul { padding-left: 1.3rem; }
.method li { margin-bottom: 0.35rem; }
.tip { background: var(--fond-sombre); border-left: 4px solid var(--ambre); padding: 0.75rem 1rem; border-radius: 6px; margin-top: 1rem; }
.attention { border-left-color: #E53935; }
code { background: var(--fond-sombre); color: var(--bleu); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.95em; }
.besoin { background: var(--card); border: 1px solid var(--bordure); border-radius: 10px; padding: 0.75rem 1.25rem; }
.besoin ul { margin: 0.3rem 0; padding-left: 1.3rem; }

/* Schéma d'une chaîne de nœuds */
.chaine { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 1rem 0; padding: 0.9rem; background: var(--fond-sombre); border-radius: 10px; }
.noeud { background: var(--card); border: 1px solid var(--bordure); border-radius: 8px; padding: 0.45rem 0.7rem; font-size: 0.9rem; line-height: 1.4; }
.noeud b { display: block; color: white; }
.noeud span { color: var(--text-dim); font-size: 0.85rem; }
.noeud.evenement { border-color: var(--teal); }
.noeud.evenement b { color: var(--teal); }
.noeud.condition { border-color: var(--bleu); }
.noeud.condition b { color: var(--bleu); }
.fleche { color: var(--text-dim); font-size: 0.85rem; white-space: nowrap; }
.fleche em { color: var(--ambre); font-style: normal; }

.nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }
.nav a { font-weight: bold; }
footer { text-align: center; padding: 1.5rem; background: var(--entete); border-top: 1px solid var(--bordure); color: var(--text-dim); font-size: 0.9rem; }
@media (max-width: 600px) { header h1 { font-size: 1.4rem; } }
header .langues { margin-top: 0.8rem; font-size: 0.85rem; line-height: 1.8; }
header .langues strong { color: var(--text); }

/* Vidéo YouTube intégrée (format 16:9) */
.video { margin: 1.5rem 0; }
.video-cadre { position: relative; width: 100%; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { font-size: 0.95rem; opacity: 0.8; margin-top: 0.4rem; text-align: center; }