/* onglets.css — V1.8.2 : onglets de classeur (PC). Le mobile garde son rendu, voir onglets-mobile.css */

/* couleur du liseré de chaque onglet */
[data-tab="buildings"], [data-panel="equipe"] { --lisere: var(--vert); }
[data-tab="upgrades"], [data-panel="achievements"] { --lisere: var(--jaune); }
[data-tab="decrees"], [data-panel="records"] { --lisere: var(--rouge); }
[data-tab="mandats"], [data-panel="recueil"] { --lisere: #3b6a9c; }
[data-panel="help"] { --lisere: #7a5aa0; }
[data-panel="options"] { --lisere: var(--encre-douce); }

@media (min-width: 801px) {
  /* ---- Menu du haut : onglets posés sur le bord bas de l'en-tête ---- */
  .menu-bar { align-items: flex-end; gap: 3px; padding: 8px 12px 0; }
  .menu-title { align-self: center; padding-bottom: 8px; }
  .menu-bar button {
    position: relative;
    padding: 7px 14px 6px;
    border: 1.5px solid var(--vert);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: color-mix(in srgb, var(--papier-fonce) 75%, var(--carton));
    box-shadow: inset 0 3px 0 var(--lisere, var(--vert));
    transition: padding 0.12s;
  }
  .menu-bar button:hover { background: var(--vert-pale); padding-top: 9px; }
  .menu-bar button.on:hover { padding-top: 11px; }
  .menu-bar button.on { z-index: 2; padding: 11px 16px 8px; margin-bottom: -2px; background: var(--carton); }

  /* ---- Boutique : intercalaires, l'onglet choisi monte et se fond dans la fiche ---- */
  .shop-tabs { flex-wrap: nowrap; align-items: flex-end; gap: 3px; margin-top: 6px; padding-left: 8px; position: relative; z-index: 2; }
  .shop-tabs button {
    position: relative;
    padding: 6px 11px 5px;
    border: 1.5px solid var(--vert);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: color-mix(in srgb, var(--papier-fonce) 75%, var(--carton));
    color: var(--encre);
    box-shadow: inset 0 3px 0 var(--lisere, var(--vert));
    transition: padding 0.12s;
  }
  .shop-tabs button:hover { padding-top: 8px; }
  .shop-tabs button.active:hover { padding-top: 10px; }
  .shop-tabs button.active { z-index: 3; padding: 10px 13px 7px; margin-bottom: -1.5px; background: var(--carton); color: var(--encre); }
  .shop-content { margin-top: 0; box-sizing: border-box; padding: 10px; background: var(--carton); border: 1.5px solid var(--vert); border-radius: 0 6px 6px 6px; }

}

/* ---- Panneau déroulant : sort du bord bas de la barre du haut, sur toute sa largeur ---- */
.menu-bar { grid-row: 1; }
.drawer { grid-column: 1 / -1; grid-row: 1; align-self: end; position: relative; height: 0; z-index: 1500; }
.drawer-sheet {
  position: absolute; top: 0; left: 0; right: 0; box-sizing: border-box;
  max-height: min(75vh, calc(100vh - 120px)); overflow-y: auto; padding: 12px 16px 16px;
  background: var(--carton); border: 2px solid var(--vert); border-top: none; border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 18px var(--ombre);
  animation: deroule 0.28s ease-out;
}
.drawer-sheet .panel-head { margin-bottom: 8px; }
@keyframes deroule { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -20px 0); } }
.reduce-motion .drawer-sheet { animation: none; }
@media (prefers-reduced-motion: reduce) { .drawer-sheet { animation: none; } }

/* ---- Couleur de l'onglet reprise dans le panneau (titre, rubriques, bordure, bouton) ---- */
.menu-bar { position: relative; z-index: 1600; }
.menu-bar button.on { border-color: var(--lisere, var(--vert)); }
.drawer-sheet { border-color: var(--lisere, var(--vert)); --teinte: color-mix(in srgb, var(--lisere, var(--vert)) 62%, var(--encre)); }
.drawer-sheet h2, .drawer-sheet h3, .drawer-sheet h4 { color: var(--teinte); }
.drawer-sheet .panel-head { border-bottom: 2px solid color-mix(in srgb, var(--lisere, var(--vert)) 55%, transparent); padding-bottom: 8px; }
.drawer-sheet .panel-close { background: var(--teinte); color: var(--carton); border: none; }
.drawer-sheet .shop-item.owned, .drawer-sheet .rec-item { border-left-color: var(--lisere, var(--vert)); }
.drawer-sheet .ach.got { border-color: var(--lisere, var(--vert)); }
/* le reste de l'écran s'assombrit légèrement (9 %), teinté de la couleur de l'onglet ; la barre du haut reste claire */
.drawer:has(.drawer-sheet)::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: color-mix(in srgb, color-mix(in srgb, var(--lisere, var(--vert)) 35%, black) 24%, transparent);
  animation: voile-in 0.28s ease-out;
}
@keyframes voile-in { from { opacity: 0; } to { opacity: 1; } }
.reduce-motion .drawer:has(.drawer-sheet)::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .drawer:has(.drawer-sheet)::before { animation: none; } }

/* ---- Fond légèrement teinté de la couleur du liseré, pour chaque onglet principal ---- */
:root { --teinte-onglet: 11%; }
.drawer-sheet, .shop-content { --fond-onglet: color-mix(in srgb, var(--lisere, var(--vert)) var(--teinte-onglet), var(--carton)); }
.drawer-sheet { background: var(--fond-onglet); }
.menu-bar button.on { background: color-mix(in srgb, var(--lisere, var(--vert)) var(--teinte-onglet), var(--carton)); }
@media (min-width: 801px) {
  .shop-content { background: var(--fond-onglet); border-color: var(--lisere, var(--vert)); }
  /* la boutique occupe toute la largeur de sa colonne : onglets et fiche collés aux bords */
  .col-right { padding-left: 0; padding-right: 0; padding-bottom: 0; }
  .col-right > h3 { padding: 0 12px; }
  .shop-tabs { padding-left: 12px; }
  .shop-content { border-left: none; border-right: none; border-bottom: none; border-radius: 0 0 4px 4px; padding: 10px 12px; }
  .shop-tabs button.active { background: color-mix(in srgb, var(--lisere, var(--vert)) var(--teinte-onglet), var(--carton)); border-color: var(--lisere, var(--vert)); }
}

/* ---- Tuiles de succès : grande image centrée (96 px) au-dessus du texte ---- */
.ach-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ach { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 10px 10px; }
.ach > .ach-pic, .ach > .ach-icon { width: 96px; height: 96px; margin: 0 0 4px; }
.ach > .ach-icon { display: flex; align-items: center; justify-content: center; font-size: 3em; }
.ach > strong { font-size: 1em; }
.ach > .ach-joke { margin-top: 2px; }

/* ---- Records : blocs, classement, tableau et cartes de chiffres ---- */
.rec-best { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 12px; background: color-mix(in srgb, var(--lisere, var(--vert)) 14%, var(--carton)); border-left: 5px solid var(--lisere, var(--vert)); border-radius: 4px; }
.rec-best-label { font-size: 0.95em; color: var(--encre-douce); }
.rec-best-value { font-family: var(--machine); font-size: 1.7em; color: var(--encre); }
.rec-group { margin: 16px 0 6px; padding-bottom: 3px; border-bottom: 1px solid color-mix(in srgb, var(--lisere, var(--vert)) 45%, transparent); font-size: 1em; }
.rec-top { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.rec-top li { counter-increment: rang; display: grid; grid-template-columns: 2rem 6rem 1fr 6rem; gap: 8px; align-items: baseline; padding: 5px 4px; border-bottom: 1px dotted var(--papier-fonce); }
.rec-top li::before { content: counter(rang); font-weight: bold; color: var(--teinte, var(--vert)); text-align: center; }
.rec-top .rec-time { grid-column: 3; order: 3; }
.rec-top .rec-run { grid-column: 2; font-family: var(--machine); }
.rec-top .rec-doc { grid-column: 4; order: 4; color: var(--encre-douce); text-align: right; }
.rec-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.rec-table th { text-align: left; padding: 4px 8px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--encre-douce); border-bottom: 2px solid color-mix(in srgb, var(--lisere, var(--vert)) 45%, transparent); }
.rec-table td { padding: 5px 8px; border-bottom: 1px dotted var(--papier-fonce); font-family: var(--machine); }
.rec-table td:nth-child(5) { font-family: inherit; }
.rec-table tr:nth-child(even) td { background: color-mix(in srgb, var(--lisere, var(--vert)) 5%, transparent); }
.rec-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rec-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: color-mix(in srgb, var(--lisere, var(--vert)) 6%, var(--fiche)); border: 1px solid var(--papier-fonce); border-radius: 4px; }
.rec-stat-label { font-size: 0.8em; color: var(--encre-douce); }
.rec-stat-value { font-family: var(--machine); font-size: 1.15em; color: var(--encre); }

/* ---- Écran titre et choix de doctrine : pas de voile noir, le jeu reste visible derrière ---- */
.modal-dialog:has(.title-screen), .modal-dialog:has(.doctrine-choice) { background: transparent; }
.title-screen, .doctrine-choice { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35); }

/* ---- V1.8.3 : acquis de la run (centre) et Réformes achetées grisées (boutique) ---- */
.acq-head { display: flex; justify-content: space-between; align-items: baseline; }
.acq-head h3 { margin: 0 0 4px; }
.acq-count { font-family: var(--machine); font-weight: bold; color: var(--encre); }
.acq-bar { height: 6px; margin: 2px 0 8px; background: var(--papier-fonce); border-radius: 3px; overflow: hidden; }
.acq-bar i { display: block; height: 100%; width: 0; background: var(--vert); }
.acq-grid { display: grid; gap: 2px; }
.acq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 1px 0; border-bottom: 1px dotted var(--papier-fonce); font-size: 0.82em; }
.acq-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acq-owned { font-family: var(--machine); color: var(--encre-douce); font-weight: normal; }
.acq-cells { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.acq-cell { display: inline-block; width: 32px; height: 32px; }
.acq-icon { width: 32px; height: 32px; filter: grayscale(1) brightness(0.7); opacity: 0.5; }
.acq-cell.on .acq-icon { filter: none; opacity: 1; }
.shop-item.acquise { opacity: 0.6; }
.shop-item.acquise .shop-icon { filter: grayscale(0.8); }
.shop-item.acquise .shop-cost { color: var(--vert); font-weight: bold; }
.acq-row.max { background: color-mix(in srgb, var(--jaune) 14%, transparent); box-shadow: inset 3px 0 0 var(--jaune); padding-left: 6px; }
.acq-row.max .acq-owned { color: var(--jaune); font-weight: bold; }

/* ---- V1.8.3 : Réforme de l'État, barre sous l'en-tête et confirmation ---- */
.reform-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 6px; }
.reform-bar[data-etat="attente"] { border: 1px dashed var(--papier-fonce); background: transparent; color: var(--encre-douce); font-size: 0.85em; }
.reform-bar[data-etat="prete"] { border: 2px solid var(--rouge); background: color-mix(in srgb, var(--rouge) 11%, var(--carton)); padding: 6px 14px; position: relative; }
.rb-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rb-title { color: var(--encre); }
.reform-bar[data-etat="prete"] .rb-title { color: var(--rouge); font-size: 1.05em; white-space: nowrap; }
.reform-bar[data-etat="prete"] .rb-text { flex-direction: row; align-items: baseline; gap: 10px; }
.reform-bar[data-etat="prete"] .rb-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rb-more { flex: none; padding: 6px 12px; border: 1px solid var(--rouge); border-radius: 4px; background: var(--carton); color: var(--rouge); font-weight: bold; cursor: pointer; }
.rb-more:hover { background: color-mix(in srgb, var(--rouge) 9%, var(--carton)); }
.rb-detail { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; padding: 10px 16px; background: var(--carton); border: 2px solid var(--rouge); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); max-height: 60vh; overflow-y: auto; }
.rb-detail p { margin: 0 0 6px; font-size: 0.9em; }
.rb-detail p:last-child { margin-bottom: 0; }
.rb-sub { font-size: 0.92em; }
.rb-progress { width: 180px; height: 6px; background: var(--papier-fonce); border-radius: 3px; overflow: hidden; flex: none; }
.rb-progress[hidden] { display: none; }
.rb-progress i { display: block; height: 100%; width: 0; background: var(--rouge); }
.reform-bar .reform-button { width: auto; margin: 0; padding: 8px 20px; font-size: 1em; border-radius: 6px; flex: none; box-shadow: 0 3px 0 color-mix(in srgb, var(--rouge) 60%, black); }
.reform-bar .reform-button:hover { filter: brightness(1.08); }
.reform-bar .reform-button:active { transform: translateY(2px); box-shadow: none; }
.reform-confirm .rc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.rc-col { padding: 8px 12px; border-radius: 4px; border: 1px solid var(--papier-fonce); }
.rc-col h4 { margin: 0 0 4px; }
.rc-col ul { margin: 0; padding-left: 18px; }
.rc-reset { background: color-mix(in srgb, var(--rouge) 8%, var(--carton)); }
.rc-reset h4 { color: var(--rouge); }
.rc-keep { background: color-mix(in srgb, var(--vert) 9%, var(--carton)); }
@media (max-width: 800px) { .reform-bar[data-etat="prete"] .rb-text { flex-wrap: wrap; } .reform-bar[data-etat="prete"] .rb-sub { white-space: normal; } .reform-bar { flex-wrap: wrap; } .rb-progress { width: 100%; } .reform-bar .reform-button { width: 100%; } .reform-confirm .rc-cols { grid-template-columns: 1fr; } }

/* ---- V1.9 : révélation progressive et aperçu de la Réforme ---- */
[hidden] { display: none !important; }
.reveal-in { animation: revealIn 0.7s ease-out; }
@keyframes revealIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.reduce-motion .reveal-in { animation: none; }
@media (prefers-reduced-motion: reduce) { .reveal-in { animation: none; } }
.reveal-note { margin-top: 6px; }
.rb-sub2 { font-size: 0.85em; color: var(--encre-douce); display: block; margin-top: 2px; }