/* Onglets Règles et Bien jouter : sommaire et sections repliables */

.guide-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

/* Sommaire : pastilles cliquables qui ouvrent la section correspondante */
.guide-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1 1 400px;
}

.guide-toc a {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-strong);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.guide-toc a:hover { border-color: var(--blue); color: var(--blue); }

.guide-actions { display: flex; gap: 0.4rem; }

.guide-action {
    padding: 0.3rem 0.7rem;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 0.8rem;
}

.guide-action:hover { border-color: var(--blue); color: var(--blue); }

/* Ouvrir une section la déplie vers le bas, sans faire bouger la page. Sans cette règle, le navigateur
   garderait immobile ce qui se trouve en dessous (sections suivantes, crédits) et pousserait la section
   ouverte vers le haut, hors de l'écran, quand on est en bas de la page. */
.guide,
.credits { overflow-anchor: none; }

.guide-section {
    margin-bottom: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    scroll-margin-top: 4rem; /* ne pas passer sous la barre d'onglets collante sur mobile */
}

.guide-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--heading);
}

.guide-section summary::-webkit-details-marker { display: none; }

/* Chevron qui pivote à l'ouverture */
.guide-section summary::after {
    content: "▸";
    display: inline-block;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.guide-section[open] summary::after { transform: rotate(90deg); }
.guide-section[open] summary { border-bottom: 1px solid var(--border); }

.guide-body {
    padding: 1rem 1.2rem 1.2rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-strong);
}

.guide-body h4 {
    margin: 1rem 0 0.4rem;
    color: var(--heading);
}

.guide-body h4:first-child { margin-top: 0; }
.guide-body p { margin-bottom: 0.6rem; }
.guide-body ul,
.guide-body ol { margin: 0 0 0.6rem 1.2rem; }
.guide-body li { margin-bottom: 0.35rem; }
.guide-body .pour,
.guide-body .contre { font-weight: 700; }
.guide-body .styled-table { margin: 0.4rem 0 0.8rem; }

/* Outils et Tuto jury : tableaux simples (raccourcis, signaux, rôles) et touches du clavier */
.note-table {
    width: 100%;
    margin: 0.4rem 0 0.8rem;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.note-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.note-table td:first-child {
    width: 38%;
    font-weight: 600;
    color: var(--heading);
}

/* Tuto jury : plan de salle officiel (image du toolkit, toujours sur fond blanc) */
.room-figure {
    margin: 0.4rem 0 1rem;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
}

.room-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.room-figure figcaption {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #64748b;
    text-align: center;
}

/* Adresses (#regles/poi…) dans le texte */
.guide-body code {
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    font-size: 0.9em;
}

kbd {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
}

/* L'essentiel : liste à puces mise en avant */
.key-points {
    list-style: none;
    margin-left: 0 !important;
}

.key-points li {
    padding: 0.35rem 0 0.35rem 1.4rem;
    position: relative;
    border-bottom: 1px dashed var(--border);
}

.key-points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--teal-dark);
    font-weight: 700;
}

.guide-source {
    margin-top: 0.8rem;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-muted);
}

.guide-note {
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--blue);
    background: var(--highlight);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.85rem;
    color: var(--text-soft);
}