/* =========================================================
   AMILI — DESIGN TOKENS
   Système design pour landing pages Amili Services
   Note : Police Nunito chargée depuis le HTML via <link> (perfo)
   ========================================================= */

:root {
  /* ---------- COULEURS ---------- */
  /* Neutres */
  --ink:        #111111;   /* Noir principal — texte, wordmark */
  --nuit:       #0F1B2D;   /* Bleu nuit — fonds premium */
  --papier:     #FFFFFF;   /* Blanc — fond clair */
  --papier-2:   #F7F6F3;   /* Off-white — fond alterné, doux */
  --papier-3:   #ECEAE3;   /* Beige clair — séparateurs, cards */
  --gris-50:    #6B6B6B;   /* Texte secondaire */
  --gris-30:    #A8A8A8;   /* Texte tertiaire */
  --gris-10:    #E6E4DE;   /* Bordures fines */

  /* Accents métier */
  --metier:     #F26B2C;   /* Orange — descripteur, accent éditorial */
  --metier-12:  #FFE6D7;   /* Tinted background */
  --chaud:      #E84135;   /* Rouge — code mitigeur eau chaude */
  --froid:      #3FA9F5;   /* Bleu — code mitigeur eau froide */

  /* Sémantique surface */
  --surface:           var(--papier);
  --surface-alt:       var(--papier-2);
  --surface-deep:      var(--papier-3);
  --surface-night:     var(--nuit);
  --surface-ink:       var(--ink);
  --text:              var(--ink);
  --text-muted:        var(--gris-50);
  --text-on-night:     #F1EFEA;
  --text-on-night-dim: #8A94A6;
  --border:            var(--gris-10);
  --border-night:      #1F2D44;

  /* ---------- TYPOGRAPHIE ---------- */
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle modulaire — base 16, ratio 1.333 (4e major) — extensible */
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --t-56: 3.5rem;
  --t-72: 4.5rem;
  --t-96: 6rem;
  --t-128: 8rem;
  --t-160: 10rem;
  --t-200: 12.5rem;

  /* Poids canoniques Amili */
  --w-body:     600;  /* SemiBold — texte courant */
  --w-services: 700;  /* Bold (souvent italic) — services */
  --w-metiers:  800;  /* ExtraBold — métiers en CAPS */
  --w-display:  900;  /* Black — wordmark, hero */

  --leading-tight: 0.95;
  --leading-snug:  1.05;
  --leading-cosy:  1.2;
  --leading-body:  1.5;

  --tracking-tight: -0.02em;
  --tracking-flat:  0;
  --tracking-caps:  0.08em;
  --tracking-eyebrow: 0.12em;

  /* ---------- ESPACES ---------- */
  --s-2:  4px;
  --s-3:  8px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  48px;
  --s-9:  64px;
  --s-10: 96px;
  --s-11: 128px;
  --s-12: 160px;
  --s-13: 192px;

  /* ---------- LAYOUT ---------- */
  --gutter: clamp(20px, 4vw, 48px);
  --max:    1440px;
  --col:    minmax(0, 1fr);

  /* ---------- RAYONS / OMBRES ---------- */
  --r-pill: 999px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;

  --shadow-card: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px -8px rgba(17,17,17,.08);
  --shadow-pop:  0 4px 8px rgba(17,17,17,.06), 0 24px 64px -12px rgba(17,17,17,.18);

  /* ---------- DURÉES ---------- */
  --d-fast: 180ms;
  --d-mid:  320ms;
  --d-slow: 640ms;
  --ease:   cubic-bezier(.2,.7,.2,1);
}

/* Reset doux */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--w-body);
  font-size: var(--t-16);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--surface);
  text-wrap: pretty;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--papier); }