/* ============================================================
   MOTIX EXPRESS — Site public
   Tokens : noir MOTIX, vert MOTIX, papier clair.
   Signature : lignes de vitesse diagonales (motif du logo),
   utilisées comme structure (séparateurs, hero) et non décor.
   ============================================================ */

:root{
  /* Couleur */
  --ink:            #14161A;   /* noir MOTIX */
  --ink-soft:       #1E2126;
  --green:          #58BE3B;   /* vert MOTIX */
  --green-dark:     #3E9C29;
  --green-pale:     #EAF7E4;
  --paper:          #F6F7F5;   /* fond clair, légèrement froid */
  --paper-alt:      #EFF2EE;
  --white:          #FFFFFF;
  --text:           #1B1D21;
  --text-muted:     #666D6A;
  --line:           #E1E5E1;

  /* Typo */
  --font-display:   'Manrope', -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Rythme */
  --edge: 14px;              /* angle des séparateurs diagonaux */
  --radius: 4px;
  --container: 1240px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-display);
  background:var(--paper);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

@media (max-width:900px){
  .container{ padding:0 20px; }
}

/* Respect du mouvement réduit : coupe toute animation ambiante */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Focus clavier visible partout */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2.5px solid var(--green);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   Utilitaires typographiques
   ============================================================ */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--green-dark);
  font-weight:600;
}
.eyebrow.on-dark{ color:var(--green); }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--text);
}
h1{ font-size:clamp(34px, 5vw, 56px); line-height:1.05; }
h2{ font-size:clamp(26px, 3.4vw, 38px); line-height:1.12; }
h3{ font-size:20px; line-height:1.25; }
p{ color:var(--text-muted); }

.mono{ font-family:var(--font-mono); }

/* ============================================================
   Boutons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:14.5px;
  padding:13px 24px;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }

.btn-primary{ background:var(--green); color:#0B1A06; }
.btn-primary:hover{ background:var(--green-dark); color:#fff; }

.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }

.btn-outline-dark{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline-dark:hover{ background:var(--ink); color:#fff; }

.btn-outline-light{ border-color:rgba(255,255,255,.35); color:#fff; background:transparent; }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.btn-lg{ padding:15px 30px; font-size:15.5px; }