/* ===================================================================
   NOOVELIS — Styles globaux (typographie + boutons + micro-polish)
   Fichier : static/css/style_paragraphe.css
   NOTE : Inter est chargé via <link> dans base.html
   =================================================================== */

/* === Variables globales ========================================= */
:root {
  /* Typo */
  --h1: clamp(1.75rem, 1.1rem + 2.5vw, 2.5rem);
  --h2: clamp(1.5rem, 1.0rem + 1.8vw, 2.0rem);
  --h3: clamp(1.25rem, 0.95rem + 1.2vw, 1.5rem);

  /* Boutons */
  --btn-radius: 12px;
  --btn-primary: #2563eb;
  /* blue-600 */
  --btn-primary-hover: #1d4ed8;
  /* blue-700 */
  --btn-primary-active: #1e40af;
  /* blue-800 */
  --btn-outline-border: #cbd5e1;
  /* slate-300 */
  --btn-outline-text: #0f172a;
  /* slate-950 */

  /* Accents UI */
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --border-soft: #e2e8f0;
  /* slate-200 */
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  /* slate-50 */
  --muted: #64748b;
  /* slate-500 */
  --code-bg: #0b1220;
}

:root.dark,
.dark :root {
  --btn-outline-border: #334155;
  /* slate-700 */
  --btn-outline-text: #e2e8f0;
  /* slate-200 */
  --border-soft: #1f2937;
  --surface: #0b1220;
  --surface-alt: #111827;
  --muted: #94a3b8;
  --code-bg: #0f172a;
}

/* === Typographie globale ========================================= */
html {
  font-size: 15px;
}

@media (min-width: 1024px) {
  html {
    font-size: 15.5px;
  }
}

html,
body,
button,
input,
select,
textarea {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  line-height: 1.6;
  letter-spacing: .001em;
  font-feature-settings: "liga" 1, "calt" 1, "ss01" 1;
}

/* Titres */
h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}

h1 {
  font-size: var(--h1);
  line-height: 1.15;
  margin: .6em 0 .4em;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--h2);
  line-height: 1.2;
  margin: .75em 0 .45em;
  letter-spacing: -0.005em;
}

h3 {
  font-size: var(--h3);
  line-height: 1.25;
  margin: .85em 0 .5em;
}

/* === Liens : AUCUN soulignement (pour enlever la “ligne”) ========= */
a,
a:link,
a:visited,
a:hover,
a:active,
nav a,
.sidebar a,
.menu a,
.header a,
.footer a,
main a,
.ck-content a,
a.btn,
button.btn,
.btn,
[role="button"],
.underline,
.hover\:underline:hover,
.focus\:underline:focus {
  text-decoration: none !important;
}

/* Couleur des liens (sans underline) */
a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-strong);
}

.dark a {
  color: #60a5fa;
}

.dark a:hover {
  color: #3b82f6;
}

/* Focus accessible */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .45);
  outline-offset: 2px;
}

/* === CKEditor : contenu (texte) =================================== */
.ck-content {
  font-family: inherit !important;
}

.ck-content p {
  text-indent: 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.ck-content p+p {
  margin-top: .4em;
}

.ck-content blockquote {
  margin: 1rem 0;
  padding: .5rem 1rem;
  border-left: 4px solid var(--accent);
  background: color-mix(in oklab, var(--surface-alt) 70%, transparent);
  font-style: italic;
  color: var(--muted);
}

.dark .ck-content blockquote {
  background: color-mix(in oklab, var(--surface-alt) 40%, transparent);
}

.ck-content hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
  margin: 1.25rem 0;
}

/* Listes */
.ck-content ul,
.ck-content ol {
  margin: .75rem 0 .75rem 1.25rem;
  padding: 0;
}

.ck-content li {
  margin: .35rem 0;
}

.ck-content ul li::marker {
  color: var(--accent);
}

.ck-content ol li::marker {
  color: var(--muted);
}

/* Code */
code,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .925em;
  background: color-mix(in oklab, var(--surface-alt) 80%, transparent);
  padding: .12em .35em;
  border-radius: .35rem;
}

pre {
  background: var(--code-bg);
  color: #e5e7eb;
  padding: 1rem 1.125rem;
  border-radius: .75rem;
  overflow: auto;
  line-height: 1.55;
  border: 1px solid color-mix(in oklab, #fff 6%, transparent);
}

pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: .95em;
}

/* Tables (globales) */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

thead th {
  text-align: left;
  font-weight: 700;
  color: var(--accent-strong);
  border-bottom: 2px solid var(--border-soft);
  padding: .625rem .75rem;
}

tbody td {
  border-bottom: 1px solid var(--border-soft);
  padding: .5rem .75rem;
}

tbody tr:nth-child(odd) {
  background: color-mix(in oklab, var(--surface-alt) 65%, transparent);
}

.dark tbody tr:nth-child(odd) {
  background: color-mix(in oklab, var(--surface-alt) 30%, transparent);
}

/* === Champs de formulaire ======================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: .625rem;
  padding: .55rem .75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);
}

/* === Boutons (simple, propre, sans contour noir) ================== */
.btn,
a.btn,
button.btn,
input[type="button"].btn,
input[type="submit"].btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: .55rem .9rem;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  background: #ffffff;
  color: #111827;

  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;

  transition: background-color .2s ease, color .2s ease, transform .06s ease, border-color .2s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--btn-primary);
  color: #fff;
  border-color: var(--btn-primary);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}

.btn-primary:active {
  background: var(--btn-primary-active);
  border-color: var(--btn-primary-active);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--btn-outline-border);
  color: var(--btn-outline-text);
}

.btn-outline:hover {
  background: rgba(15, 23, 42, .03);
}

.dark .btn-outline:hover {
  background: rgba(255, 255, 255, .04);
}

.btn-sm {
  padding: .45rem .75rem;
  font-size: .85rem;
}

.btn-lg {
  padding: .75rem 1.1rem;
  font-size: .95rem;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* === Rating Stars (JS) =========================================== */
.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  outline: 0;
}

.rating-stars .star-wrapper {
  position: relative;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.rating-stars .star {
  position: absolute;
  inset: 0;
}

.rating-stars .star-base path {
  fill: #d1d5db !important;
}

.rating-stars .star-fill path {
  fill: #f59e0b !important;
}

.rating-stars .star-fill-box {
  position: absolute;
  inset: 0;
  width: 0%;
  overflow: hidden;
  pointer-events: none;
}

.rating-stars .star-wrapper[data-fill="0"] .star-fill-box {
  width: 0%;
}

.rating-stars .star-wrapper[data-fill="50"] .star-fill-box {
  width: 50%;
}

.rating-stars .star-wrapper[data-fill="100"] .star-fill-box {
  width: 100%;
}

.rating-simple {
  position: relative;
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.rating-simple .stars-base {
  color: #d1d5db;
}

.rating-simple .stars-fill {
  color: #f59e0b;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
}

.sr-only-visually {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}