/* ============================================================
   KITO DIGITAL — base.css
   Ajustements de thème clair non couverts par les variables, reset,
   éléments HTML, accessibilité (prefers-reduced-motion), container et
   utilitaires de texte.
   ============================================================ */

/* ── Overrides light : éléments non couverts par les variables ── */

/* Badge */
[data-theme="light"] .badge {
  background: rgba(124, 92, 255, 0.10);
  border-color: rgba(124, 92, 255, 0.30);
  color: #5B3FD6;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .badge {
    background: rgba(124, 92, 255, 0.10);
    border-color: rgba(124, 92, 255, 0.30);
    color: #5B3FD6;
  }
}

/* Bouton secondary */
[data-theme="light"] .btn--secondary { background: #FFFFFF; }
[data-theme="light"] .btn--secondary:hover {
  background: var(--ow-card-hover);
  box-shadow: 0 4px 20px rgba(124, 92, 255, 0.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn--secondary { background: #FFFFFF; }
  :root:not([data-theme="dark"]) .btn--secondary:hover {
    background: var(--ow-card-hover);
    box-shadow: 0 4px 20px rgba(124, 92, 255, 0.12);
  }
}

/* Bouton ghost */
[data-theme="light"] .btn--ghost { border-color: rgba(15, 21, 37, 0.15); }
[data-theme="light"] .btn--ghost:hover { background: rgba(124, 92, 255, 0.06); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn--ghost { border-color: rgba(15, 21, 37, 0.15); }
  :root:not([data-theme="dark"]) .btn--ghost:hover { background: rgba(124, 92, 255, 0.06); }
}

/* Dropdown */
[data-theme="light"] .dropdown-menu {
  background: #FFFFFF;
  box-shadow: var(--shadow), 0 0 20px rgba(124, 92, 255, 0.08);
}
[data-theme="light"] .mobile-menu .dropdown-menu {
  background: transparent;
  box-shadow: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .dropdown-menu {
    background: #FFFFFF;
    box-shadow: var(--shadow), 0 0 20px rgba(124, 92, 255, 0.08);
  }
  :root:not([data-theme="dark"]) .mobile-menu .dropdown-menu {
    background: transparent;
    box-shadow: none;
  }
}

/* Texture noise atténuée */
[data-theme="light"] body::before { opacity: 0.20; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body::before { opacity: 0.20; }
}

/* Liseré carte atténué */
[data-theme="light"] .ow-card::after { opacity: 0.45; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ow-card::after { opacity: 0.45; }
}

/* Glow btn-primary plus doux */
[data-theme="light"] .btn--primary {
  animation: btn-pulse-light 3s ease-in-out infinite;
}
@keyframes btn-pulse-light {
  0%, 100% { box-shadow: 0 0 12px rgba(124, 92, 255, 0.18); }
  50%       { box-shadow: 0 0 22px rgba(124, 92, 255, 0.32); }
}

/* Fallback backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  [data-theme="light"] .ow-card { background: #FFFFFF; }
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track  { background: var(--ow-bg-secondary); }
[data-theme="light"] ::-webkit-scrollbar-thumb  { background: rgba(124, 92, 255, 0.28); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--ow-primary); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) ::-webkit-scrollbar-track { background: var(--ow-bg-secondary); }
  :root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb { background: rgba(124, 92, 255, 0.28); }
}

/* Sélection */
[data-theme="light"] ::selection {
  background: rgba(124, 92, 255, 0.18);
  color: var(--ow-text);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) ::selection {
    background: rgba(124, 92, 255, 0.18);
    color: var(--ow-text);
  }
}


/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Empêche iOS d'agrandir le texte en paysage sans bloquer le zoom manuel. */
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--ow-text);
  background-color: var(--ow-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* `overflow-x: hidden` a été retiré de html et de body.
     Il masquait les débordements horizontaux au lieu de les corriger, et,
     posé sur html, il transforme la page en conteneur de défilement : les
     éléments en `position: sticky` (sommaire d'article, barre latérale) ne
     collent plus. Les causes réelles de débordement sont traitées dans la
     section RESPONSIVE MOBILE de components.css — pour l'essentiel le
     `min-width: auto` par défaut des enfants de grille et de flex.
     Si un défilement horizontal réapparaît, c'est un vrai bug à corriger :
     il ne doit pas être remasqué ici. */
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

button, input, textarea, select {
  font: inherit;
  background: none;
  border: none;
  outline: none;
}
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  line-height: var(--lh-tight);
  color: var(--ow-text);
  font-weight: 700;
}

/* ── Accessibilité ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: 2px solid var(--ow-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Layout ────────────────────────────────────────────────── */
.container {
  width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ── Utilitaires texte ─────────────────────────────────────── */
.text-center { text-align: center; }

.text-gradient,
.gradient-text {
  background: var(--ow-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}