/* =====================================================================
   WEB 213 — Réinitialisation et fondations
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t-base), color var(--t-base);
}

html[dir="rtl"] body { font-family: var(--font-ar); }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.22; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--primary-hover); text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }

/* L'attribut `hidden` de la feuille de style navigateur ne s'applique pas
   aux éléments SVG (espace de noms différent) : on le rétablit ici. */
svg[hidden] { display: none !important; }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.3em; }

:focus-visible {
  outline: 3px solid var(--field-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-200); color: var(--brand-900); }

/* ---- Fond décoratif : nappes floues -------------------------------- */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 10% 0%,  var(--blob-3) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 100%, var(--blob-2) 0%, transparent 60%),
    var(--bg);
}
.bg-canvas span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .85;
  animation: drift 22s ease-in-out infinite alternate;
}
.bg-canvas span:nth-child(1) { width: 46vmax; height: 46vmax; top: -14vmax; inset-inline-start: -10vmax; background: var(--blob-1); }
.bg-canvas span:nth-child(2) { width: 38vmax; height: 38vmax; bottom: -16vmax; inset-inline-end: -8vmax;  background: var(--blob-2); animation-delay: -7s; }
.bg-canvas span:nth-child(3) { width: 30vmax; height: 30vmax; top: 38%; inset-inline-end: 24%;           background: var(--blob-3); animation-delay: -13s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3vmax, -4vmax, 0) scale(1.12); }
}

/* ---- Structure ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.stack > * + * { margin-block-start: var(--gap, 16px); }

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

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

/* ---- Repli si backdrop-filter n'est pas supporté -------------------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root       { --glass-bg: rgba(255, 255, 255, .93); }
  [data-theme="dark"] { --glass-bg: rgba(19, 40, 58, .95); }
}