/* ==========================================================================
   BASE — polices, variables de design, reset, typographie
   Toutes les valeurs proviennent du fichier Figma (WALKER).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Poppins auto-hébergée — sous-ensemble latin, 4 graisses (30 Ko au total).
   `font-display: swap` : le texte s'affiche immédiatement dans la police
   système, puis bascule sur Poppins dès qu'elle est chargée.
   -------------------------------------------------------------------------- */
/* Light 300 et ExtraBold 800 ne servent qu'aux études de cas. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins-800.woff2') format('woff2');
}

/* Inter — uniquement les noms d'outils de la page About (choix délibéré).
   Réduite aux caractères latins de base : 23 Ko → 8 Ko. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}

/* Poor Story — police manuscrite, uniquement « WELCOME TO MY PLACE ».
   Police coréenne découpée en ~120 sous-ensembles : seul le latin est chargé. */
@font-face {
  font-family: 'Poor Story';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poorstory-400.woff2') format('woff2');
}

/* Rampart One — le mot « Walkers » dans le texte de l'étude de cas.
   Réduite au latin de base : 39 Ko → 11 Ko. */
@font-face {
  font-family: 'Rampart One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rampartone-400.woff2') format('woff2');
}

/* Cookie — le mot « Friendly ». Réduite au latin de base : 14 Ko → 9 Ko. */
@font-face {
  font-family: 'Cookie';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cookie-400.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Variables de design
   -------------------------------------------------------------------------- */
:root {
  /* Familles de police */
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-tools:   'Inter', var(--font-body);        /* noms d'outils, page About */
  --font-display:  'Poor Story', var(--font-body);  /* texte manuscrit, page About */
  --font-wordmark: 'Rampart One', var(--font-body); /* mot « Walkers » dans le texte */
  --font-script:   'Cookie', var(--font-body);      /* mot « Friendly », page Walkers */

  /* Couleurs — noms et valeurs repris des styles Figma */
  --violet-700: #6d28d9; /* boutons pleins, texte sur crème */
  --violet-600: #7c3aed; /* logo, page courante (mobile) */
  --violet-50:  #f5f3ff; /* cercle décoratif */
  --yellow-50:  #fefce8; /* bouton secondaire, fond des champs de formulaire */
  --yellow-100: #fef9c3; /* survol du bouton secondaire, bordure des champs */
  --gray-500:   #6b7280; /* texte secondaire — 4.83:1 sur blanc, AA ✓ */
  --dark:       #000000;
  --white:      #ffffff;

  /* Échelle d'espacement — uniquement les pas réellement présents dans Figma */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-s:   16px;
  --space-m:   24px;
  --space-l:   32px;
  --space-xl:  40px;
  --space-2xl: 60px;
  --space-3xl: 95px;  /* rythme entre sections, mobile */
  --space-4xl: 120px; /* rythme entre sections, desktop */

  /* Rayons */
  --radius-card: 24px;
  --radius-pill: 99px;

  /* Typographie — mobile par défaut, surchargée en desktop plus bas */
  --fs-hero:   32px;
  --fs-h2:     24px;
  --fs-h3:     20px;
  --fs-body:   16px;
  --fs-lead:   16px; /* paragraphes d'intro */
  --fs-small:  14px;
  --fs-logo:   18px;

  --lh-hero:   normal;
  --lh-h2:     32px;
  --lh-h3:     28px;
  --lh-body:   24px;
  --lh-small:  20px;

  /* Gabarit */
  --container:  1200px;
  --page-max:   1440px;
  --page-pad:   var(--space-s);

  /* Zone tappable minimale (exigence mobile) */
  --tap-min: 44px;
}

/* Desktop : seconde échelle typographique, distincte de la mobile.
   Bascule à 900px — au-delà, la maquette desktop est simplement resserrée. */
@media (min-width: 900px) {
  :root {
    --fs-hero:  clamp(40px, 4.444vw, 64px); /* exactement 64px à 1440px */
    --fs-h2:    32px;
    --fs-h3:    24px;
    --fs-lead:  20px;
    --fs-logo:  24px;

    --lh-h2:    normal;
    --lh-h3:    normal;

    /* 8.333vw = 120px à 1440px de large, puis se resserre jusqu'à 24px */
    --page-pad: clamp(24px, 8.333vw, 120px);
  }
}

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

html {
  /* Compense la nav collante lors d'une navigation par ancre */
  scroll-padding-top: 96px;
}

body,
h1,
h2,
h3,
p,
figure {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Typographie de base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--dark);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Les cercles décoratifs débordent volontairement à droite.
     `clip` plutôt que `hidden` : `hidden` transformerait le body en conteneur
     de défilement et casserait la nav collante. */
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Accessibilité
   -------------------------------------------------------------------------- */

/* Anneau de focus visible au clavier uniquement (absent de la maquette,
   ajouté pour la navigation clavier — invisible à la souris). */
:focus-visible {
  outline: 3px solid var(--violet-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lien d'évitement : premier élément tabulable, masqué jusqu'au focus. */
.skip-link {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 200;
  padding: var(--space-xs) var(--space-s);
  background-color: var(--violet-700);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Masque visuellement sans retirer du flux pour les lecteurs d'écran. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}