/* ============================================================
   SAFE — Design system : tokens globaux + reset + a11y
   ============================================================ */

@font-face {
  font-family: "safeFont";
  src: url("../../assets/font_family/safe_font/Quadrillion\ Sb.otf")
    format("opentype");
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ----- Typographie ----- */
  --font-display: "safeFont", "Poppins", sans-serif;
  --font-body:    "Inter", "Poppins", system-ui, -apple-system, sans-serif;

  /* échelle modulaire (1.125) */
  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-md:  1rem;       /* 16 */
  --text-lg:  1.125rem;   /* 18 */
  --text-xl:  1.25rem;    /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-4xl: 2.25rem;    /* 36 */
  --text-5xl: 3rem;       /* 48 */

  --leading-tight:   1.25;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ----- Espacement (grille 4px) ----- */
  --space-2xs: 0.25rem;  /* 4  */
  --space-xs:  0.5rem;   /* 8  */
  --space-sm:  0.75rem;  /* 12 */
  --space-md:  1rem;     /* 16 */
  --space-lg:  1.5rem;   /* 24 */
  --space-xl:  2rem;     /* 32 */
  --space-2xl: 3rem;     /* 48 */
  --space-3xl: 4rem;     /* 64 */
  --space-4xl: 6rem;     /* 96 */

  /* ----- Rayons ----- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 9999px;

  /* ----- Ombres (élévations) ----- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-2xl: 0 32px 64px rgba(15, 23, 42, 0.18);
  --shadow-brand: 0 12px 28px rgba(0, 106, 255, 0.25);
  --shadow-focus: 0 0 0 4px rgba(0, 106, 255, 0.18);

  /* ----- Transitions ----- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 380ms;
  --transition-base: all var(--duration-base) var(--ease-out);

  /* ----- Containers ----- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1080px;
  --container-xl: 1280px;

  /* ----- Z-index ----- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   500;
  --z-modal:    9000;
  --z-toast:    9500;
  --z-tooltip:  9999;

  /* ============================================================
     Alias historiques — NE PAS supprimer
     ============================================================ */
  --spacing-sm: var(--space-xs);
  --spacing-md: var(--space-lg);
  --spacing-lg: var(--space-2xl);
  --font-main:  var(--font-display);
  --font-two:   var(--font-body);
  --radius:     var(--radius-sm);
  --radius-two: var(--radius-lg);

  --main-overlay:
    radial-gradient(circle at 15% 20%, rgba(30, 144, 255, 0.18), transparent 22%),
    radial-gradient(circle at 85% 25%, rgba(0, 255, 255, 0.12), transparent 18%),
    radial-gradient(circle at 50% 85%, rgba(112, 147, 255, 0.12), transparent 22%);

  --glass-bg:     rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 28px 70px rgba(0, 12, 45, 0.25);
  --shadow-soft:  0 18px 40px rgba(0, 0, 0, 0.11);
  --glow-color:   rgba(0, 182, 255, 0.45);

  --main-bg: linear-gradient(
    180deg,
    #9baac4 0%,
    #204ec4 35%,
    #1f356d 65%,
    #185186 100%
  );
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  background-color: var(--color-bg);
  color: var(--text-strong);
  min-height: 100vh;
}

/* ----- Liens ----- */
a {
  color: var(--brand-600);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover {
  color: var(--brand-700);
}

/* Liens dans le body original avaient une couleur claire (sur header/footer sombres).
   On garde le comportement historique sans casser les pages applicatives. */
body > header a,
body > footer a,
.hero a,
.final-cta a {
  color: var(--text-on-dark);
}

/* ----- Listes ----- */
li {
  list-style: none;
}

/* ----- Médias ----- */
img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----- Titres : famille display ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

/* ----- Sélection texte ----- */
::selection {
  background-color: var(--brand-200);
  color: var(--brand-900);
}

/* ============================================================
   Accessibilité — focus visible cohérent
   ============================================================ */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Boutons / inputs : focus avec glow doux à la place de l'outline */
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a.btn:focus-visible,
.safe-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ----- Skip-link ----- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 0.6rem 1rem;
  background: var(--brand-700);
  color: var(--text-on-brand);
  border-radius: var(--radius-sm);
  z-index: var(--z-tooltip);
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
}

/* ----- Préférence : mouvements réduits ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Helpers utilitaires
   ============================================================ */
.text-muted    { color: var(--text-muted); }
.text-strong   { color: var(--text-strong); }
.text-success  { color: var(--success-600); }
.text-warning  { color: var(--warning-600); }
.text-danger   { color: var(--danger-600); }
.text-brand    { color: var(--brand-600); }

.surface-1 {
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.surface-2 {
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

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