/* Tsubomi — couche de compatibilité progressive. Aucun visuel du site n'est remplacé. */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; max-width: 100%; overflow-x: hidden; }
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: 16px; }
[hidden] { display: none !important; }

/* Anciennes versions WebKit : limite les anomalies de composition de calques. */
@supports (-webkit-touch-callout: none) {
  .hero, .home-releases, .card, .panel, .tsubomi-assistant-panel, .important-info-card { -webkit-transform: translateZ(0); transform: translateZ(0); }
  video { -webkit-transform: translateZ(0); transform: translateZ(0); }
}

/* Appareils tactiles : cibles confortables, y compris navigateurs hybrides. */
@media (pointer: coarse) {
  button, .btn, [role="button"], input[type="button"], input[type="submit"] { min-height: 44px; }
}

/* Contraste système / Windows High Contrast. */
@media (forced-colors: active) {
  * { -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; }
  .btn, button, input, select, textarea, .card, .panel { border: 1px solid CanvasText !important; }
}

/* Préférences d'accessibilité communes. */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { -webkit-animation-duration: 0.001ms !important; animation-duration: 0.001ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; -webkit-transition-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Fallback sans CSS Grid : conserve les sections lisibles au lieu de les casser. */
.tsb-no-grid .grid,
.tsb-no-grid .manga-grid,
.tsb-no-grid .future-grid,
.tsb-no-grid .admin-grid,
.tsb-no-grid .capsule-zone,
.tsb-no-grid .home-grid,
.tsb-no-grid .hero-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.tsb-no-grid .grid > *,
.tsb-no-grid .manga-grid > *,
.tsb-no-grid .future-grid > *,
.tsb-no-grid .capsule-zone > *,
.tsb-no-grid .home-grid > *,
.tsb-no-grid .hero-grid > * { width: 100%; min-width: 0; }
@media (min-width: 700px) {
  .tsb-no-grid .manga-grid > *, .tsb-no-grid .future-grid > * { width: 48%; margin-right: 2%; }
}

/* Fallback très ancien : valeurs directes quand les variables CSS ne sont pas comprises. */
.tsb-no-cssvars body { margin: 0; background: #07070a; color: #f7f7fb; font-family: Arial, Helvetica, sans-serif; }
.tsb-no-cssvars a { color: #f20b88; }
.tsb-no-cssvars .container { width: 94%; max-width: 1240px; margin-left: auto; margin-right: auto; }
.tsb-no-cssvars .site-header, .tsb-no-cssvars header { background: #09090d; border-bottom: 1px solid #2b2230; }
.tsb-no-cssvars .header-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.tsb-no-cssvars .btn, .tsb-no-cssvars button { display: inline-block; padding: 12px 16px; border-radius: 12px; border: 1px solid #34313d; background: #17171f; color: #fff; text-decoration: none; }
.tsb-no-cssvars .btn.primary, .tsb-no-cssvars button.primary { background: #f20b88; border-color: #f20b88; }
.tsb-no-cssvars .card, .tsb-no-cssvars .panel, .tsb-no-cssvars .future-card, .tsb-no-cssvars .manga-card { background: #111117; border: 1px solid #2b2230; color: #f7f7fb; }
.tsb-no-cssvars .muted, .tsb-no-cssvars .date { color: #b9b5c1; }
.tsb-no-cssvars .hero { background: #100813; }
.tsb-no-cssvars .rgpd, .tsb-no-cssvars .important-info-card, .tsb-no-cssvars .tsubomi-assistant-panel { background: #101016; color: #fff; border: 1px solid #4b2340; }

/* Fenêtres et éléments fixes : toujours dans le viewport, même vieux Safari / WebView. */
.rgpd, .important-info-layer, .tsubomi-assistant-panel { max-width: 100vw; }
.tsb-legacy .tsubomi-assistant-panel { max-height: 88vh; overflow: auto; }
.tsb-legacy .important-info-card { max-height: 88vh; overflow: auto; }

/* Écrans très étroits / anciens téléphones. */
@media (max-width: 360px) {
  .container { width: auto !important; margin-left: 12px !important; margin-right: 12px !important; }
  .btn, button { white-space: normal; }
  .hero h1, .hero-title, .cortex-title { font-size: 34px !important; line-height: 1.04 !important; overflow-wrap: anywhere; }
  .header-actions, .hero-actions, .toolbar { width: 100%; }
}

/* Très grands écrans : évite l'étirement excessif. */
@media (min-width: 2200px) {
  .container { max-width: 1680px; }
}

@media print {
  .site-header, .rgpd, .tsubomi-assistant-panel, .cortex-dock, .important-info-layer, .reader-controls { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}