/* ===== Design tokens ===== */
:root{
  /* Font & rhythm */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  --radius: 10px;
  --r-sm: 8px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04);
  --shadow-2: 0 6px 20px rgba(0,0,0,.08);

  /* Palette (clair) */
  --color-primary: #1f6feb;
  --color-primary-600:#1a60cf;
  --color-on-primary:#fff;

  --color-secondary:#6b7280;

  --color-success:#0e9f6e;
  --color-warning:#f59e0b;
  --color-danger:#e11d48;

  --color-surface:#ffffff;
  --color-on-surface:#111827;
  --color-muted:#374151;
  --color-subtle-surface:#f9fafb;
  --color-border:#e5e7eb;

  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 35%, transparent);
  --focus-outline: 2px solid color-mix(in oklab, var(--color-primary) 60%, transparent);
}

/* Thème sombre automatique ou via [data-theme="dark"] sur html */
@media (prefers-color-scheme: dark) {
  :root{
    --color-surface:#0b0e14;
    --color-on-surface:#e5e7eb;
    --color-muted:#cbd5e1;
    --color-subtle-surface:#0f131b;
    --color-border:#1f2937;
    --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 10px rgba(0,0,0,.4);
    --shadow-2: 0 10px 30px rgba(0,0,0,.55);
  }
}
html[data-theme="dark"]{
  --color-surface:#0b0e14;
  --color-on-surface:#e5e7eb;
  --color-muted:#cbd5e1;
  --color-subtle-surface:#0f131b;
  --color-border:#1f2937;
}

/* ===== Base reset léger ===== */
*{box-sizing:border-box}
html{
  font-family:var(--font-sans);
  color:var(--color-on-surface);
  background:var(--color-surface);
  /* échelle fluide */
  font-size: clamp(15px, 1.2vw + 10px, 18px);
  hanging-punctuation: first allow-end;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
body{margin:0}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
a{
  color:var(--color-primary);
  text-decoration: none;
}
a:hover{ text-decoration: underline }
:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}
::selection{ background: color-mix(in oklab, var(--color-primary) 25%, transparent); }

/* Hit targets confort */
button,[role=button],a[role=button]{min-height:44px}

/* ===== Layout ===== */
.container{
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
  padding-block: var(--space-2);
}
.prose{
  max-width: 70ch;
}
.grid{ display:grid; gap: var(--space-2) }
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }

/* ===== Accessibilité ===== */
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ===== Header / Footer ===== */
header.site{
  position: sticky; top: 0; z-index: 40;
  background: var(--color-subtle-surface);
  border-bottom:1px solid var(--color-border);
  backdrop-filter: saturate(1.2) blur(6px);
}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.2px}
.header-actions{display:flex;gap:.5rem;align-items:center}

nav[aria-label="Principale"] a{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  color: var(--color-muted);
}
nav[aria-label="Principale"] a:hover{
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-on-surface);
}
nav[aria-label="Principale"] a[aria-current=page]{
  font-weight: 700;
  color: var(--color-on-surface);
  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 40%, transparent);
}

footer.site{
  border-top:1px solid var(--color-border);
  margin-top:var(--space-3);
  padding-top:var(--space-2);
  opacity:.95;
  font-size: .925rem;
}

/* ===== Skiplinks ===== */
.skiplinks{
  position: fixed; top:.5rem; left:.5rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.skiplinks a{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  padding:.35rem .6rem;
  border-radius:var(--radius);
  box-shadow: var(--shadow-1);
}

/* ===== Hero ===== */
.hero{
  padding: clamp(var(--space-2), 3vw, var(--space-4));
  background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* ===== Cards ===== */
.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: clamp(12px, 2.5vw, 22px);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
}
.card > h3{ margin-top:0; font-size: clamp(1.05rem, 1.2vw, 1.25rem) }

/* ===== Boutons ===== */
.btn{
  --_bg: var(--color-primary);
  --_fg: var(--color-on-primary);
  display: inline-flex; align-items:center; gap:.5rem;
  height: 44px; padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--_bg);
  color: var(--_fg);
  font-weight: 600; letter-spacing:.2px;
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover{ filter: brightness(1.03) }
.btn:active{ transform: translateY(1px) }
.btn:focus-visible{ box-shadow: var(--focus-ring) }
.btn.ghost{
  --_bg: transparent; --_fg: var(--color-on-surface);
  border-color: var(--color-border);
}
.btn.success{ --_bg: var(--color-success) }
.btn.warning{ --_bg: var(--color-warning) }
.btn.danger{ --_bg: var(--color-danger) }
.btn.block{ width: 100% }

/* ===== Formulaires ===== */
.input, select, textarea{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border:1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-on-surface);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea{ height: auto; min-height: 110px; resize: vertical }
.input::placeholder, textarea::placeholder{ color: color-mix(in oklab, var(--color-on-surface) 50%, transparent) }
.input:focus, select:focus, textarea:focus{
  border-color: color-mix(in oklab, var(--color-primary) 60%, var(--color-border));
  box-shadow: var(--focus-ring);
}

/* ===== Tables ===== */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.table thead th{
  text-align:left;
  font-weight:700;
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-subtle-surface));
  padding: .75rem;
}
.table tbody td{
  padding: .7rem .75rem;
  border-top: 1px solid var(--color-border);
}
.table tbody tr:hover{
  background: color-mix(in oklab, var(--color-primary) 6%, transparent);
}

/* ===== Badges / Tags ===== */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .85rem;
  border: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface));
}
.badge.success{ border-color: color-mix(in oklab, var(--color-success) 45%, var(--color-border)) }
.badge.warning{ border-color: color-mix(in oklab, var(--color-warning) 45%, var(--color-border)) }
.badge.danger{  border-color: color-mix(in oklab, var(--color-danger) 45%, var(--color-border)) }

/* ===== Helpers ===== */
.mt-1{ margin-top: var(--space-1) } .mt-2{ margin-top: var(--space-2) } .mt-3{ margin-top: var(--space-3) }
.mb-1{ margin-bottom: var(--space-1) } .mb-2{ margin-bottom: var(--space-2) } .mb-3{ margin-bottom: var(--space-3) }
.p-1{ padding: var(--space-1) } .p-2{ padding: var(--space-2) } .p-3{ padding: var(--space-3) }
.center{ display:grid; place-items:center }
.max-w-prose{ max-width: 70ch }

/* ===== Anim utilitaire (respecte reduced-motion) ===== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton{
  border-radius: var(--r-sm);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--color-border) 40%, transparent) 0%,
    color-mix(in oklab, var(--color-border) 15%, transparent) 50%,
    color-mix(in oklab, var(--color-border) 40%, transparent) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
@media (prefers-reduced-motion: reduce){ .skeleton{ animation: none } }

.hero {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius);
  padding: 2rem;
}