/* ==========================================================
   Thème clair / sombre
   Fichier généré par build_theme.py : ne pas modifier à la main.
   - Auto (par défaut) : suit le réglage du système
   - Clair / Sombre    : choix du visiteur (localStorage "theme")
   ========================================================== */

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ----- Bouton de thème (nav) ----- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: none;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  padding: 3px 10px;
  margin: 0 6px;
  font-family: inherit;
  line-height: 1.2;
  flex-shrink: 0;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--gold, #ffa600);
  border-color: var(--gold, #ffa600);
  color: var(--navy, #090979);
}
.theme-toggle__icon { font-size: 1.1rem; }
.theme-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nav-mobile .theme-toggle { margin: 8px auto; }
.nav-mobile .theme-toggle__label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  font-size: 1rem;
}

/* ----- Bandeau d'information (cookies fonctionnels) ----- */
.info-bandeau {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 900;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: min(34rem, calc(100vw - 2rem));
  padding: .75rem .9rem;
  background: #fffbf1;
  color: #090979;
  border: 1px solid rgba(9, 9, 121, .35);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
  animation: info-bandeau-in .35s ease-out;
}
.info-bandeau[hidden] { display: none; }
.info-bandeau p {
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: .95rem;
  line-height: 1.35;
}
.info-bandeau p a { text-decoration: underline; }
.info-bandeau__close {
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: .3rem .5rem;
}
.info-bandeau__close:hover,
.info-bandeau__close:focus-visible {
  background: var(--gold, #ffa600);
  color: var(--navy, #090979);
}
@keyframes info-bandeau-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .info-bandeau { animation: none; }
}
@media (max-width: 768px) {
  .info-bandeau { left: .5rem; right: .5rem; bottom: .5rem; max-width: none; }
}

/* ===== Mode sombre : choix manuel ===== */
:root[data-theme="dark"] {
  --t-bg: #0a0a1a;
  --t-surface: #1a1a4a;
  --t-surface-2: #23236a;
  --t-text: #f3e9d2;
  --t-muted: #a9a5c2;
  --t-border: #3d3da8;
  --t-link: #ffc864;
  --t-link-visited: #e9b866;
  --t-input-bg: #1a1a4a;
  --t-input-border: #4a4ab8;
  --t-bar: linear-gradient(90deg, #0d0d3f 0%, #1a1a4a 50%, #0d0d3f 100%);
  --t-gold-line: rgba(255, 166, 0, .55);
  --t-btn: linear-gradient(90deg, #14148a 0%, #2b2bd1 50%, #14148a 100%);
}
:root[data-theme="dark"] {
  background: var(--t-bg);
  color: var(--t-text);
  scrollbar-color: var(--t-border) var(--t-bg);
}
:root[data-theme="dark"] body {
  background: transparent;
  color: var(--t-text);
}
:root[data-theme="dark"] p a:not(.button) {
  color: var(--t-link);
  background: rgba(255, 255, 255, .06);
}
:root[data-theme="dark"] p a:not(.button):visited {
  color: var(--t-link-visited);
}
:root[data-theme="dark"] p a:not(.button):hover,
:root[data-theme="dark"] p a:not(.button):focus {
  background-color: rgba(255, 255, 255, .14);
}
:root[data-theme="dark"] footer p a:not(.button),
:root[data-theme="dark"] footer p a:not(.button):visited {
  color: #fff;
  background: none;
}
:root[data-theme="dark"] nav,
:root[data-theme="dark"] footer,
:root[data-theme="dark"] .nav-dropdown,
:root[data-theme="dark"] .nav-toggle-input:checked + nav + .nav-mobile {
  background: var(--t-bar);
}
:root[data-theme="dark"] header nav {
  box-shadow: inset 0 -1px 0 var(--t-gold-line);
}
:root[data-theme="dark"] footer {
  box-shadow: inset 0 1px 0 var(--t-gold-line), -0.1vh -0.2vw 0.4vw rgba(0, 0, 0, 0.363);
}
:root[data-theme="dark"] summary:hover {
  border-color: var(--t-border);
}
:root[data-theme="dark"] .card:hover,
:root[data-theme="dark"] .img-text2:hover,
:root[data-theme="dark"] .oeuvres:hover {
  background: var(--t-surface);
}
:root[data-theme="dark"] .img-text2 {
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] .card .img-text2,
:root[data-theme="dark"] .card .img-text2:hover {
  background: unset;
  box-shadow: unset;
}
:root[data-theme="dark"] .card-actualite,
:root[data-theme="dark"] .card-a-propos,
:root[data-theme="dark"] .card-autres,
:root[data-theme="dark"] .card-apropos2,
:root[data-theme="dark"] .card-apropos3 {
  border-color: var(--t-border);
}
:root[data-theme="dark"] .card-title,
:root[data-theme="dark"] .pagination,
:root[data-theme="dark"] .pagination span,
:root[data-theme="dark"] .par-page-form,
:root[data-theme="dark"] .description-serie,
:root[data-theme="dark"] .autre-tome {
  color: var(--t-text);
}
:root[data-theme="dark"] .actu h2,
:root[data-theme="dark"] .actu h3,
:root[data-theme="dark"] .actu p,
:root[data-theme="dark"] .actu i {
  color: var(--t-text);
  text-shadow: -1px -1px 0 var(--t-bg), 1px -1px 0 var(--t-bg), -1px 1px 0 var(--t-bg), 1px 1px 0 var(--t-bg);
}
:root[data-theme="dark"] .button,
:root[data-theme="dark"] input[type="submit"] {
  background: var(--t-btn);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
:root[data-theme="dark"] .button:hover,
:root[data-theme="dark"] .button:focus {
  background: var(--gold);
  color: var(--navy);
  outline: 2px solid #fff;
  box-shadow: none;
}
:root[data-theme="dark"] #btn-retour {
  background: unset;
  box-shadow: none;
}
:root[data-theme="dark"] #btn-retour:hover,
:root[data-theme="dark"] #btn-retour:focus {
  background: var(--gold);
}
:root[data-theme="dark"] .recherche-form button,
:root[data-theme="dark"] .editor-toolbar button {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
:root[data-theme="dark"] .recherche-form button:hover,
:root[data-theme="dark"] .editor-toolbar button:hover {
  box-shadow: none;
}
:root[data-theme="dark"] main form:not([id="sib-form"]) input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
:root[data-theme="dark"] main form:not([id="sib-form"]) textarea,
:root[data-theme="dark"] main form:not([id="sib-form"]) select {
  background-color: var(--t-input-bg);
  color: var(--t-text);
  border-color: var(--t-input-border);
}
:root[data-theme="dark"] main form:not([id="sib-form"]) input::placeholder,
:root[data-theme="dark"] main form:not([id="sib-form"]) textarea::placeholder {
  color: var(--t-muted);
}
:root[data-theme="dark"] .info-bandeau {
  background: var(--t-surface);
  color: var(--t-text);
  border-color: var(--t-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}
:root[data-theme="dark"] .info-bandeau__close:hover,
:root[data-theme="dark"] .info-bandeau__close:focus-visible {
  background: var(--gold);
  color: var(--navy);
}
:root[data-theme="dark"] .nav-search-suggestions {
  background: var(--t-surface);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
:root[data-theme="dark"] .nav-search-suggestions li {
  border-bottom-color: rgba(255, 255, 255, .1);
}
:root[data-theme="dark"] .nav-search-suggestions li a {
  color: var(--t-text);
}
:root[data-theme="dark"] .nav-search-suggestions li a:hover {
  background: var(--t-surface-2);
}
:root[data-theme="dark"] .nav-search-suggestions li span {
  color: var(--t-muted);
}
@media (max-width: 768px) {
  :root[data-theme="dark"] .actu h2,
  :root[data-theme="dark"] .actu h3,
  :root[data-theme="dark"] .actu p,
  :root[data-theme="dark"] .actu i { text-shadow: none; }
}

/* ===== Mode sombre : automatique (système) ===== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --t-bg: #0a0a1a;
  --t-surface: #1a1a4a;
  --t-surface-2: #23236a;
  --t-text: #f3e9d2;
  --t-muted: #a9a5c2;
  --t-border: #3d3da8;
  --t-link: #ffc864;
  --t-link-visited: #e9b866;
  --t-input-bg: #1a1a4a;
  --t-input-border: #4a4ab8;
  --t-bar: linear-gradient(90deg, #0d0d3f 0%, #1a1a4a 50%, #0d0d3f 100%);
  --t-gold-line: rgba(255, 166, 0, .55);
  --t-btn: linear-gradient(90deg, #14148a 0%, #2b2bd1 50%, #14148a 100%);
}
:root:not([data-theme="light"]) {
  background: var(--t-bg);
  color: var(--t-text);
  scrollbar-color: var(--t-border) var(--t-bg);
}
:root:not([data-theme="light"]) body {
  background: transparent;
  color: var(--t-text);
}
:root:not([data-theme="light"]) p a:not(.button) {
  color: var(--t-link);
  background: rgba(255, 255, 255, .06);
}
:root:not([data-theme="light"]) p a:not(.button):visited {
  color: var(--t-link-visited);
}
:root:not([data-theme="light"]) p a:not(.button):hover,
:root:not([data-theme="light"]) p a:not(.button):focus {
  background-color: rgba(255, 255, 255, .14);
}
:root:not([data-theme="light"]) footer p a:not(.button),
:root:not([data-theme="light"]) footer p a:not(.button):visited {
  color: #fff;
  background: none;
}
:root:not([data-theme="light"]) nav,
:root:not([data-theme="light"]) footer,
:root:not([data-theme="light"]) .nav-dropdown,
:root:not([data-theme="light"]) .nav-toggle-input:checked + nav + .nav-mobile {
  background: var(--t-bar);
}
:root:not([data-theme="light"]) header nav {
  box-shadow: inset 0 -1px 0 var(--t-gold-line);
}
:root:not([data-theme="light"]) footer {
  box-shadow: inset 0 1px 0 var(--t-gold-line), -0.1vh -0.2vw 0.4vw rgba(0, 0, 0, 0.363);
}
:root:not([data-theme="light"]) summary:hover {
  border-color: var(--t-border);
}
:root:not([data-theme="light"]) .card:hover,
:root:not([data-theme="light"]) .img-text2:hover,
:root:not([data-theme="light"]) .oeuvres:hover {
  background: var(--t-surface);
}
:root:not([data-theme="light"]) .img-text2 {
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
:root:not([data-theme="light"]) .card .img-text2,
:root:not([data-theme="light"]) .card .img-text2:hover {
  background: unset;
  box-shadow: unset;
}
:root:not([data-theme="light"]) .card-actualite,
:root:not([data-theme="light"]) .card-a-propos,
:root:not([data-theme="light"]) .card-autres,
:root:not([data-theme="light"]) .card-apropos2,
:root:not([data-theme="light"]) .card-apropos3 {
  border-color: var(--t-border);
}
:root:not([data-theme="light"]) .card-title,
:root:not([data-theme="light"]) .pagination,
:root:not([data-theme="light"]) .pagination span,
:root:not([data-theme="light"]) .par-page-form,
:root:not([data-theme="light"]) .description-serie,
:root:not([data-theme="light"]) .autre-tome {
  color: var(--t-text);
}
:root:not([data-theme="light"]) .actu h2,
:root:not([data-theme="light"]) .actu h3,
:root:not([data-theme="light"]) .actu p,
:root:not([data-theme="light"]) .actu i {
  color: var(--t-text);
  text-shadow: -1px -1px 0 var(--t-bg), 1px -1px 0 var(--t-bg), -1px 1px 0 var(--t-bg), 1px 1px 0 var(--t-bg);
}
:root:not([data-theme="light"]) .button,
:root:not([data-theme="light"]) input[type="submit"] {
  background: var(--t-btn);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
:root:not([data-theme="light"]) .button:hover,
:root:not([data-theme="light"]) .button:focus {
  background: var(--gold);
  color: var(--navy);
  outline: 2px solid #fff;
  box-shadow: none;
}
:root:not([data-theme="light"]) #btn-retour {
  background: unset;
  box-shadow: none;
}
:root:not([data-theme="light"]) #btn-retour:hover,
:root:not([data-theme="light"]) #btn-retour:focus {
  background: var(--gold);
}
:root:not([data-theme="light"]) .recherche-form button,
:root:not([data-theme="light"]) .editor-toolbar button {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
:root:not([data-theme="light"]) .recherche-form button:hover,
:root:not([data-theme="light"]) .editor-toolbar button:hover {
  box-shadow: none;
}
:root:not([data-theme="light"]) main form:not([id="sib-form"]) input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
:root:not([data-theme="light"]) main form:not([id="sib-form"]) textarea,
:root:not([data-theme="light"]) main form:not([id="sib-form"]) select {
  background-color: var(--t-input-bg);
  color: var(--t-text);
  border-color: var(--t-input-border);
}
:root:not([data-theme="light"]) main form:not([id="sib-form"]) input::placeholder,
:root:not([data-theme="light"]) main form:not([id="sib-form"]) textarea::placeholder {
  color: var(--t-muted);
}
:root:not([data-theme="light"]) .info-bandeau {
  background: var(--t-surface);
  color: var(--t-text);
  border-color: var(--t-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}
:root:not([data-theme="light"]) .info-bandeau__close:hover,
:root:not([data-theme="light"]) .info-bandeau__close:focus-visible {
  background: var(--gold);
  color: var(--navy);
}
:root:not([data-theme="light"]) .nav-search-suggestions {
  background: var(--t-surface);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
:root:not([data-theme="light"]) .nav-search-suggestions li {
  border-bottom-color: rgba(255, 255, 255, .1);
}
:root:not([data-theme="light"]) .nav-search-suggestions li a {
  color: var(--t-text);
}
:root:not([data-theme="light"]) .nav-search-suggestions li a:hover {
  background: var(--t-surface-2);
}
:root:not([data-theme="light"]) .nav-search-suggestions li span {
  color: var(--t-muted);
}
@media (max-width: 768px) {
  :root:not([data-theme="light"]) .actu h2,
  :root:not([data-theme="light"]) .actu h3,
  :root:not([data-theme="light"]) .actu p,
  :root:not([data-theme="light"]) .actu i { text-shadow: none; }
}
}