/* style.css — Cerfa Clicker V1.1 : papier, tampon, fiches cartonnées ; thèmes clair et sombre par variables */

:root {
  --papier: #f5f0e1;
  --carton: #fffdf5;
  --fiche: #ffffff;
  --papier-fonce: #e6dfc8;
  --encre: #1c1c1c;
  --encre-douce: #5b5a54;
  --vert: #2f5d50;
  --vert-pale: #e8f1ec;
  --rouge: #b3261e;
  --jaune: #d9a21b;
  --orange: #e08a1e;
  --alerte-fond: #fff1c9;
  --sur-vert: #ffffff;
  --sur-rouge: #ffffff;
  --voile: rgba(0, 0, 0, 0.6);
  --ombre: rgba(0, 0, 0, 0.12);
  --machine: "Courier New", Courier, monospace;
  /* tampon et Cerfa doré : identiques dans les deux thèmes */
  --tampon-haut: #e0584d;
  --tampon-bas: #b3261e;
  --tampon-bord: #7d1a14;
  --flamme-a: #ff9d2e;
  --flamme-b: #ffcf4d;
  --or-clair: #f7d96b;
  --or-fonce: #8a6200;
  --encre-fixe: #1c1c1c;
  /* V1.4 : accents de doctrine (remplacent --vert et --vert-pale quand une doctrine est choisie) */
  --acc-rigueur: #2f4f73; --acc-rigueur-pale: #e6edf5;
  --acc-debrouille: #6f4f0e; --acc-debrouille-pale: #f5ecd6;
  --acc-numerique: #1d6b3a; --acc-numerique-pale: #e3f3e6;
  --acc-externalisation: #5b3f7a; --acc-externalisation-pale: #efe9f5;
  --acc-zele: #8a2f5b; --acc-zele-pale: #f6e6ee;
  /* teintes d'ambiance (mélange de 6 % au plus avec le fond) */
  --teinte-matin: #ffd27a; --teinte-apresmidi: #ffffff; --teinte-soir: #ff9a5a; --teinte-nuit: #3a4a8a;
  color-scheme: light;
}

/* Thème sombre : automatique (suit le système) sauf si « Clair » est forcé, ou forcé par « Sombre » */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #1b1a16;
    --carton: #26241d;
    --fiche: #2d2b23;
    --papier-fonce: #3a372c;
    --encre: #ece6d3;
    --encre-douce: #b9b3a0;
    --vert: #6fb39e;
    --vert-pale: #22332d;
    --rouge: #ec6e63;
    --jaune: #e6b43a;
    --orange: #e8a24a;
    --alerte-fond: #3d3317;
    --sur-vert: #10231d;
    --sur-rouge: #1d0907;
    --voile: rgba(0, 0, 0, 0.75);
    --ombre: rgba(0, 0, 0, 0.5);
    --acc-rigueur: #8fb4dd; --acc-rigueur-pale: #1f2a38;
    --acc-debrouille: #dcb46a; --acc-debrouille-pale: #382e18;
    --acc-numerique: #6fd08f; --acc-numerique-pale: #1c3324;
    --acc-externalisation: #c3a6e6; --acc-externalisation-pale: #2b2238;
    --acc-zele: #e79bbf; --acc-zele-pale: #3a1f2d;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --papier: #1b1a16;
  --carton: #26241d;
  --fiche: #2d2b23;
  --papier-fonce: #3a372c;
  --encre: #ece6d3;
  --encre-douce: #b9b3a0;
  --vert: #6fb39e;
  --vert-pale: #22332d;
  --rouge: #ec6e63;
  --jaune: #e6b43a;
  --orange: #e8a24a;
  --alerte-fond: #3d3317;
  --sur-vert: #10231d;
  --sur-rouge: #1d0907;
  --voile: rgba(0, 0, 0, 0.75);
  --ombre: rgba(0, 0, 0, 0.5);
  --acc-rigueur: #8fb4dd; --acc-rigueur-pale: #1f2a38;
  --acc-debrouille: #dcb46a; --acc-debrouille-pale: #382e18;
  --acc-numerique: #6fd08f; --acc-numerique-pale: #1c3324;
    --acc-externalisation: #c3a6e6; --acc-externalisation-pale: #2b2238;
    --acc-zele: #e79bbf; --acc-zele-pale: #3a1f2d;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  background: color-mix(in srgb, var(--papier) 94%, var(--teinte, var(--papier)));
  color: var(--encre);
}
body.anim { transition: background-color 30s; }
body[data-ambiance="matin"] { --teinte: var(--teinte-matin); }
body[data-ambiance="apresmidi"] { --teinte: var(--teinte-apresmidi); }
body[data-ambiance="soir"] { --teinte: var(--teinte-soir); }
body[data-ambiance="nuit"] { --teinte: var(--teinte-nuit); }
body.reduce-motion, body.reduce-motion.anim { transition: none; }

button, select, input, textarea { font-family: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

/* LAYOUT PRINCIPAL - 3 colonnes */
#game-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.4fr;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
  position: relative;
}

/* doctrine choisie : accent et touches de style (les contrastes sont testés pour chaque doctrine) */
#game-container[data-doctrine="rigueur"] { --vert: var(--acc-rigueur); --vert-pale: var(--acc-rigueur-pale); }
#game-container[data-doctrine="debrouille"] { --vert: var(--acc-debrouille); --vert-pale: var(--acc-debrouille-pale); }
#game-container[data-doctrine="numerique"] { --vert: var(--acc-numerique); --vert-pale: var(--acc-numerique-pale); }
#game-container[data-doctrine="externalisation"] { --vert: var(--acc-externalisation); --vert-pale: var(--acc-externalisation-pale); }
#game-container[data-doctrine="zele"] { --vert: var(--acc-zele); --vert-pale: var(--acc-zele-pale); }
#game-container[data-doctrine="debrouille"] .col-left, #game-container[data-doctrine="debrouille"] .col-center, #game-container[data-doctrine="debrouille"] .col-right { background-image: linear-gradient(135deg, rgba(120, 90, 20, 0.06), transparent 40%, rgba(120, 90, 20, 0.04)); }
#game-container[data-doctrine="rigueur"] .col-left, #game-container[data-doctrine="rigueur"] .col-center, #game-container[data-doctrine="rigueur"] .col-right, #game-container[data-doctrine="rigueur"] .shop-item { border-radius: 2px; }
#game-container[data-doctrine="numerique"] .counter-main, #game-container[data-doctrine="numerique"] .counter-dps { letter-spacing: 0.04em; }
.doctrine-line { margin-top: 2px; font-size: 0.75em; color: var(--encre-douce); }
.doctrine-line[hidden] { display: none; }
.doc-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--vert); }
.lamp { font-size: 1.1em; margin-right: 6px; filter: drop-shadow(0 0 4px var(--jaune)); }
.lamp[hidden] { display: none; }

/* barre de menu (Succès, Recueil, Records, Aide, Options) : en haut, sur toute la largeur */
.menu-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background: var(--carton); border: 2px solid var(--vert); border-radius: 6px; }
.menu-logo { height: 79px; width: auto; display: block; }
.title-logo { display: block; margin: 0 auto 8px; width: auto; height: min(240px, 34vh); max-width: 100%; object-fit: contain; }
.title-screen { text-align: center; }
.title-screen h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.title-screen { overflow-x: hidden; }
.menu-title { margin-right: auto; color: var(--vert); font-family: var(--machine); }
.menu-bar button { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--vert); background: var(--carton); color: var(--vert); font-weight: bold; border-radius: 4px; cursor: pointer; }
.menu-bar button:hover { background: var(--vert-pale); }

.modal-content.wide { max-width: 760px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.panel-head h2 { margin: 0; }
.panel-close { padding: 6px 12px; border: 2px solid var(--vert); border-radius: 4px; background: var(--vert); color: var(--sur-vert); font-weight: bold; cursor: pointer; }
.panel-content { max-height: 70vh; overflow-y: auto; }

.col-left, .col-center, .col-right {
  background: var(--carton);
  border: 2px solid var(--vert);
  border-radius: 6px;
  padding: 12px;
  min-width: 0;
}

h1, h2, h3, h4 { color: var(--vert); margin-top: 0; }
h1 { font-size: 1.1em; margin-bottom: 4px; }
h4 { margin: 12px 0 6px; font-size: 0.95em; }

/* COLONNE GAUCHE : compteurs, tampon, jauges, compétences */
.counter-main { font-family: var(--machine); font-size: 2em; font-weight: bold; color: var(--vert); }
.counter-main.milestone { animation: halo 1s ease-out; }
@keyframes halo { from { text-shadow: 0 0 14px var(--vert); } to { text-shadow: 0 0 0 transparent; } }
.counter-score { display: block; color: var(--encre-douce); font-size: 0.75em; margin-bottom: 4px; }
.counter-dps { font-family: var(--machine); color: var(--encre-douce); font-size: 0.9em; }

.stamp-button {
  display: block;
  width: 150px;
  height: 150px;
  margin: 12px auto;
  font-family: var(--machine);
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, var(--tampon-haut), var(--tampon-bas) 70%);
  border: 4px solid var(--tampon-bord);
  border-radius: 50%;
  box-shadow: 0 6px 0 var(--tampon-bord);
  transition: transform 0.08s, box-shadow 0.08s;
}

.stamp-button { position: relative; outline: 0 solid transparent; outline-offset: 3px; }
.stamp-button[data-tier="1"] { outline: 3px solid #b07a3c; }
.stamp-button[data-tier="2"] { outline: 3px solid #aeb4bd; }
.stamp-button[data-tier="3"] { outline: 4px solid #c9a227; }
.stamp-button[data-tier="4"] { outline: 4px double #c9a227; outline-offset: 5px; background: radial-gradient(circle at 35% 30%, #e9694c, var(--tampon-bas) 70%); }
.stamp-button:active { transform: scale(0.94); box-shadow: 0 2px 0 var(--tampon-bord); }
.stamp-button.fire { animation: fire 0.5s infinite alternate; }

/* étincelles discrètes à Flux 100 : une dizaine de points qui montent et s'éteignent */
.stamp-button.fire::after {
  content: ''; position: absolute; left: 50%; top: 4px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--flamme-b);
  box-shadow: -48px 20px 0 var(--flamme-a), -26px -2px 0 var(--flamme-b), 30px 2px 0 var(--flamme-a), 52px 24px 0 var(--flamme-b), -6px -8px 0 var(--flamme-a), 14px 12px 0 var(--flamme-b);
  animation: sparks 0.9s linear infinite;
  pointer-events: none;
}
@keyframes sparks { from { transform: translateY(6px); opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }
@keyframes fire {
  from { box-shadow: 0 6px 0 var(--tampon-bord), 0 0 10px 2px var(--flamme-a); }
  to { box-shadow: 0 6px 0 var(--tampon-bord), 0 0 26px 8px var(--flamme-b); }
}

.gauge { margin-top: 10px; font-size: 0.9em; }
.gauge-track { width: 100%; max-width: 240px; height: 16px; background: var(--papier-fonce); border: 2px solid var(--encre); border-radius: 4px; overflow: hidden; }
.gauge-fill { width: 0; height: 100%; transition: width 0.2s; }
.gauge-flux { background: var(--vert); }
.gauge-cafe { background: var(--jaune); }
.gauge-conf.low { background: var(--rouge); }
.gauge-conf.mid { background: var(--orange); }
.gauge-conf.high { background: var(--vert); }
.flux-ff { display: none; color: var(--rouge); font-weight: bold; }
.flux-ff.on { display: inline; }

.actives { display: grid; gap: 6px; margin-top: 14px; }

.active-button {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 8px 10px;
  background: var(--carton);
  border: 2px solid var(--vert);
  border-radius: 4px;
  color: var(--encre);
  font-weight: 600;
  cursor: pointer;
}

.active-button:disabled { opacity: 0.6; cursor: not-allowed; }
.active-info { font-family: var(--machine); font-size: 0.85em; }
.cd-fill { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--vert); transition: width 0.2s; }

.reform-button {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: var(--rouge);
  color: var(--sur-rouge);
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* COLONNE CENTRALE : actualités, alertes, Cerfa doré */
.news-ticker {
  font-family: var(--machine);
  font-size: 0.9em;
  padding: 10px;
  min-height: 80px;
  background: var(--papier-fonce);
  border-left: 4px solid var(--rouge);
  border-radius: 4px;
  overflow: hidden;
}

.news-ticker.slide { animation: slideIn 0.6s ease-out; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.alerts { margin-top: 10px; display: grid; gap: 6px; }
.alert { padding: 8px 10px; border-radius: 4px; font-weight: 600; }
.alert[hidden] { display: none; }
.alert-control { background: var(--alerte-fond); border: 2px solid var(--jaune); }
.alert-strike { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--rouge); color: var(--sur-rouge); }
.alert-strike[hidden] { display: none; }
.strike-button { padding: 6px 10px; border: 2px solid var(--sur-rouge); border-radius: 4px; background: transparent; color: var(--sur-rouge); font-weight: bold; cursor: pointer; }
.strike-button:disabled { opacity: 0.5; cursor: not-allowed; }

.alert-incident { display: grid; gap: 4px; border: 2px solid var(--orange); background: var(--alerte-fond); }
.alert-incident.good { border-color: var(--vert); background: var(--vert-pale); }
.inc-title { color: var(--encre); }
.inc-text { font-weight: 400; }
.inc-effect { font-family: var(--machine); font-size: 0.85em; color: var(--encre-douce); font-weight: 400; }
.inc-button { justify-self: start; padding: 6px 10px; border: 2px solid var(--vert); border-radius: 4px; background: var(--carton); color: var(--vert); font-weight: bold; cursor: pointer; }
.inc-button:disabled { opacity: 0.5; cursor: not-allowed; }
.alert-save { background: var(--alerte-fond); border: 2px dashed var(--orange); }

.tutorial:not(:empty) { margin-top: 10px; padding: 8px 10px; background: var(--vert-pale); border: 1px dashed var(--vert); border-radius: 4px; }

/* Cerfa : fixé dans la fenêtre, position donnée par --cx et --cy (0 à 1) ; au-dessus du jeu, sous les fenêtres modales */
.cerfa-gold {
  position: fixed;
  z-index: 1700;          /* au-dessus du panneau déroulant (1500) et des toasts, sous les fenêtres modales (2000) */
  left: calc(8px + var(--cx, 0.5) * (100vw - 210px));
  top: calc(var(--ct, 12px) + var(--cy, 0.5) * var(--ch, 400px));
  padding: 8px 12px;
  color: var(--encre-fixe);
  background: linear-gradient(135deg, var(--or-clair), var(--jaune));
  border: 2px solid var(--or-fonce);
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  animation: pulse 0.8s infinite alternate;
}

@keyframes pulse { to { transform: scale(1.08); } }
.cerfa-gold.bad { background: linear-gradient(135deg, #b9d47a, #6e8f3a); border-color: #2f4a14; animation: shake 0.3s infinite alternate; }
@keyframes shake { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

.effects-list { margin-top: 10px; display: grid; gap: 4px; }
.effect { padding: 4px 8px; background: var(--vert-pale); border-left: 4px solid var(--vert); font-size: 0.85em; }

/* V1.3 : historique du fil, tableau de bord et courbe */
.news-history { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.news-old { padding: 3px 8px; border-left: 3px solid var(--encre-douce); font-size: 0.8em; color: var(--encre-douce); }
.center-card { margin-top: 12px; padding: 10px; background: var(--papier); border: 1px solid var(--encre-douce); border-radius: 4px; }
.center-title { margin: 0 0 6px; font-size: 1em; }
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; margin: 0; }
.dash-cell { min-width: 0; }
.dash-cell dt { font-size: 0.75em; color: var(--encre-douce); }
.dash-cell dd { margin: 0; font-family: var(--machine); font-size: 0.9em; overflow-wrap: anywhere; }
.curve-body svg { display: block; width: 100%; height: 90px; background: var(--papier-fonce); border-radius: 3px; }
.curve-area { fill: var(--vert-pale); stroke: none; opacity: 0.9; }
.curve-line { stroke: var(--vert); stroke-width: 2; vector-effect: non-scaling-stroke; }
.curve-mark { stroke: var(--rouge); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.curve-dot { fill: var(--rouge); }
.curve-note { display: block; margin-top: 4px; color: var(--encre-douce); font-size: 0.75em; }

/* V1.5 : dossiers à choix, série de Cerfa, spécialisations */
.alert-cas { display: grid; gap: 6px; border: 2px solid var(--vert); background: var(--vert-pale); }
.cas-title { color: var(--encre); }
.cas-text { font-weight: 400; }
.cas-choices { display: grid; gap: 6px; }
.cas-choice { display: grid; gap: 2px; padding: 8px 10px; text-align: left; background: var(--carton); color: var(--encre); border: 2px solid var(--vert); border-radius: 4px; cursor: pointer; font-size: 1em; }
.cas-choice:hover:not(:disabled) { background: var(--fiche); }
.cas-choice:disabled { opacity: 0.55; cursor: not-allowed; }
.cas-choice small { color: var(--encre-douce); }
.cas-timer { color: var(--encre-douce); font-weight: 400; }
.serie-chip { margin-top: 8px; padding: 4px 8px; background: var(--vert-pale); border-left: 4px solid var(--jaune); font-size: 0.85em; }
.serie-chip[hidden] { display: none; }
.shop-spec { margin-top: 4px; font-size: 0.8em; color: var(--vert); font-weight: 600; }
.shop-spec:empty { display: none; }
.spec-button { padding: 4px 10px; border: 1px solid var(--vert); background: var(--carton); color: var(--vert); font-weight: bold; border-radius: 3px; cursor: pointer; }

/* COLONNE DROITE : boutique */
.shop-tabs { display: flex; flex-wrap: wrap; gap: 4px; }

.shop-tabs button {
  padding: 6px 10px;
  border: 1px solid var(--vert);
  background: var(--carton);
  color: var(--vert);
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
}

.shop-tabs button.active { background: var(--vert); color: var(--sur-vert); }
.badge { color: var(--rouge); }
.badge[hidden] { display: none; }

/* la liste descend jusqu'au bas du cadre : contain: size l'empêche de dicter la hauteur de la colonne */
.col-right { display: flex; flex-direction: column; }
.shop-content { flex: 1 1 0; min-height: 360px; margin-top: 10px; overflow-y: auto; contain: size; }
.shop-header { margin: 0 0 8px; color: var(--encre-douce); }

.qty-select { display: flex; gap: 4px; margin-bottom: 8px; }
.qty-button { padding: 4px 10px; border: 1px solid var(--vert); background: var(--carton); color: var(--vert); border-radius: 3px; cursor: pointer; }
.qty-button.active { background: var(--vert); color: var(--sur-vert); }

/* fiches cartonnées */
.shop-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px;
  background: var(--fiche);
  border: 1px solid var(--papier-fonce);
  border-left: 6px solid var(--papier-fonce);
  border-radius: 4px;
  box-shadow: 1px 2px 0 var(--ombre);
}

.shop-item.owned { border-left-color: var(--vert); }
/* tuile de bâtiment : dégradé linéaire léger qui s'intensifie avec la quantité (même teinte que le thème, 14 % au plus) */
.shop-item[data-id] { background: linear-gradient(90deg, color-mix(in srgb, var(--vert) calc(var(--possede, 0) * 14%), var(--fiche)) 0%, var(--fiche) 90%); }
.shop-item[data-stade="3"], .shop-item[data-stade="4"], .shop-item[data-stade="5"], .shop-item[data-stade="6"], .shop-item.maxed { border-left-color: var(--jaune); }
.shop-stade { min-height: 0; margin-top: 2px; font-size: 0.75em; color: var(--encre-douce); }
.shop-stade:empty { display: none; }
.palier { height: 4px; margin-top: 6px; background: var(--papier-fonce); border-radius: 2px; overflow: hidden; }
.palier i { display: block; height: 100%; width: 0; background: var(--vert); transition: width 0.2s; }
.shop-info { min-width: 0; flex: 1; }
/* V1.8 : illustrations pixel art (grille 128 px, agrandies sans lissage) */
.pix { image-rendering: pixelated; flex: none; }
.shop-icon { width: 56px; height: 56px; }
/* Tuile illustrée : image sans cadre, flottante à gauche ; le texte l'entoure, prix et bouton se calent à côté ou dessous selon la place */
.shop-item:has(> .shop-icon) { display: flow-root; }
.shop-item:has(> .shop-icon) > .shop-icon { float: left; width: 104px; height: 104px; margin: 0 12px 4px 0; shape-margin: 8px; }
.shop-item:has(> .shop-icon) > .shop-info { display: block; }
.shop-item:has(> .shop-icon) .palier { clear: both; }
.shop-item:has(> .shop-icon) > .shop-buy { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.card.has-icon { grid-template-columns: 76px 1fr; column-gap: 12px; align-items: start; }
.card-icon { grid-row: 1 / 4; width: 76px; height: 76px; }
.spec-icon { width: 32px; height: 32px; vertical-align: middle; margin-right: 6px; }
.ach-pic { width: 56px; height: 56px; }
.panel-icon { width: 56px; height: 56px; margin-right: 12px; }
.panel-head { align-items: center; }
.panel-head h2 { margin-right: auto; }
.menu-icon { width: 32px; height: 32px; vertical-align: middle; margin-right: 6px; }
.cerfa-icon { width: 40px; height: 40px; vertical-align: middle; }
.cerfa-gold { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 700px) { .shop-item:has(> .shop-icon) > .shop-icon { width: 76px; height: 76px; } .panel-icon { width: 44px; height: 44px; } }
.shop-prod { margin-top: 2px; color: var(--vert); font-size: 0.85em; font-weight: 600; }
.shop-flavor { margin-top: 4px; color: var(--encre-douce); font-size: 0.85em; }
.shop-buy { text-align: right; white-space: nowrap; }
.shop-cost { font-family: var(--machine); font-weight: bold; }

.buy-button {
  min-width: 90px;
  margin-top: 4px;
  padding: 6px 12px;
  background: var(--vert);
  color: var(--sur-vert);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.buy-button:disabled { background: var(--encre-douce); color: var(--carton); opacity: 0.7; cursor: not-allowed; }

.help-line { margin: 0 0 8px; font-size: 0.92em; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ach { display: grid; gap: 2px; padding: 8px; background: var(--papier-fonce); border-radius: 4px; opacity: 0.7; }
.ach.got { background: var(--vert-pale); border: 1px solid var(--vert); opacity: 1; }
.ach-icon { font-size: 1.5em; }
.ach small { color: var(--encre-douce); }
.ach-joke { font-size: 0.8em; color: var(--encre-douce); }

.rec-group { margin-bottom: 4px; }
.rec-item { margin: 0 0 6px; font-size: 0.88em; }
.rec-item.locked { color: var(--encre-douce); font-style: italic; }

.opt-button { margin: 0 6px 6px 0; padding: 6px 10px; border: 1px solid var(--vert); background: var(--carton); color: var(--vert); font-weight: bold; border-radius: 4px; cursor: pointer; }
.opt-area { display: block; width: 100%; margin-top: 4px; font-family: var(--machine); background: var(--fiche); color: var(--encre); border: 1px solid var(--encre-douce); }
.opt-msg, .opt-stats { margin: 6px 0; font-size: 0.85em; color: var(--encre-douce); }
.opt-check { display: block; margin-top: 10px; }
select, input[type="range"] { background: var(--fiche); color: var(--encre); }

/* TEXTES FLOTTANTS (+N) */
.float-text {
  position: fixed;
  z-index: 1000;
  color: var(--vert);
  font-family: var(--machine);
  font-size: 1.3em;
  font-weight: bold;
  pointer-events: none;
  text-shadow: 1px 1px 0 var(--carton);
  animation: floatUp 1s ease-out forwards;
}

@keyframes floatUp { to { transform: translateY(-40px); opacity: 0; } }

/* TOASTS */
.toasts .toast.toast-cut { display: none !important; }
.toasts { position: fixed; bottom: 12px; left: 50%; width: 280px; z-index: 1550; display: grid; gap: 6px; pointer-events: none; }      /* position finale posée par G.ui.placeToasts */
@media (max-width: 800px) { .toast span { display: none; } .toast { padding: 6px 10px; } }      /* petit écran : titre seul, lignes compactes */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toast-groupe { text-align: center; font-weight: bold; padding: 5px 12px; background: var(--encre-douce); }
.toast { display: grid; gap: 2px; padding: 8px 12px; background: var(--vert); color: var(--sur-vert); border-radius: 4px; box-shadow: 0 2px 8px var(--ombre); animation: slideIn 0.3s ease-out; }
.toast span { font-size: 0.85em; }

/* MODALES */
.modal-dialog { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--voile); }
.modal-content { max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 16px; background: var(--carton); border: 3px solid var(--vert); border-radius: 6px; box-shadow: 0 4px 16px var(--ombre); }
.cards { display: grid; gap: 8px; margin: 12px 0; }
.card { display: grid; gap: 4px; padding: 10px; text-align: left; background: var(--fiche); color: var(--encre); border: 2px solid var(--vert); border-radius: 4px; cursor: pointer; font-size: 1em; }
.card:hover { background: var(--vert-pale); }
.modal-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.modal-buttons button { padding: 8px 14px; border: 2px solid var(--vert); border-radius: 4px; background: var(--carton); color: var(--vert); font-weight: bold; cursor: pointer; }
.modal-buttons button.primary { background: var(--vert); color: var(--sur-vert); }

/* CÉRÉMONIE DE RÉFORME */
.modal-content.ceremony { max-width: 460px; text-align: center; }
.modal-content.ceremony .dash-grid { text-align: left; }
.cer-stamp { display: inline-block; margin: 4px auto 10px; padding: 6px 18px; font-family: var(--machine); font-size: 1.8em; font-weight: bold; letter-spacing: 4px; color: var(--rouge); border: 4px solid var(--rouge); border-radius: 6px; transform: rotate(-6deg); animation: slam 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes slam { from { transform: rotate(-6deg) scale(2.6); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.cer-curve { margin-top: 10px; }
.cer-gain { margin-top: 12px; font-family: var(--machine); font-size: 1.8em; font-weight: bold; color: var(--vert); }

/* ANIMATIONS RÉDUITES */
.reduce-motion .cerfa-gold.bad, .reduce-motion .float-text, .reduce-motion .cerfa-gold, .reduce-motion .stamp-button.fire, .reduce-motion .news-ticker.slide { animation: none; }
.reduce-motion .stamp-button { transition: none; }
.reduce-motion .stamp-button.fire::after, .reduce-motion .counter-main.milestone, .reduce-motion .cer-stamp { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .float-text, .cerfa-gold, .stamp-button.fire, .news-ticker.slide, .toast, .counter-main.milestone, .cer-stamp { animation: none; }
  .stamp-button.fire::after { display: none; }
  body { transition: none; }
}

.mobile-nav { display: none; }

/* ÉCRAN ÉTROIT : une colonne à la fois, trois onglets en bas de l'écran (Tampon, Actualité, Boutique) */
@media (max-width: 800px) {
  #game-container { grid-template-columns: 1fr; padding: 8px; padding-bottom: 80px; }
  .shop-content { order: 1; flex: none; min-height: 0; contain: none; overflow: visible; }
  .col-right h3 { order: 0; }
  .mobile-nav {
    display: flex; align-items: center; gap: 6px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 6px; background: var(--carton); border-top: 2px solid var(--vert);
  }
  .mobile-count { flex: 1 1 auto; min-width: 0; font-family: var(--machine); font-weight: bold; color: var(--vert); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav button { flex: 0 0 auto; min-height: 48px; padding: 8px 12px; border: 1px solid var(--vert); background: var(--carton); color: var(--vert); font-weight: bold; border-radius: 4px; cursor: pointer; }
  .mobile-nav button.active { background: var(--vert); color: var(--sur-vert); }
  #game-container[data-view="stamp"] .col-center, #game-container[data-view="stamp"] .col-right,
  #game-container[data-view="news"] .col-left, #game-container[data-view="news"] .col-right,
  #game-container[data-view="shop"] .col-left, #game-container[data-view="shop"] .col-center { display: none; }
  .stamp-button { width: 170px; height: 170px; font-size: 26px; }
  .buy-button, .qty-button, .opt-button, .inc-button, .cas-choice, .spec-button { min-height: 44px; }
}
.shop-note { max-width: 140px; margin-top: 4px; font-size: 0.75em; color: var(--encre-douce); white-space: normal; }

/* V1.11 : tampon envoyé au SAV (détection de cadence) */
.stamp-button.sav { filter: grayscale(1); opacity: 0.55; cursor: not-allowed; }
.sav-label { margin: -4px auto 6px; padding: 3px 8px; text-align: center; font-size: 0.8em; font-weight: bold; color: var(--encre); background: var(--papier-fonce); border-radius: 4px; }

/* V1.11 S7 : conseil de récupération de sauvegarde sur l'écran titre */
.title-screen p:nth-of-type(3) { font-size: 0.8em; color: var(--encre-douce); }